little: 测试指令

src/directives/modules/custom.ts

@@ -1,8 +1,15 @@
 import { Directive } from "vue";
 
 const custom: Directive = {
-  mounted(el, binding) {
+  mounted(el, binding, vnode) {
-    el.style.color = binding.value;
+    el.__onClick__ = () => {
+      binding.value(vnode.props);
+    };
+    el.addEventListener("click", el.__onClick__);
+  },
+  beforeUnmount(el) {
+    // 解绑dom上的点击事件
+    el.removeEventListener("click", el.__onClick__);
   }
 };
 

src/views/custom-instruction/test-instruction/test-instruction.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="dc-page">
-    <div v-custom="'red'">文字变色</div>
+    <button v-custom="getFun" :goodsId="goodsId">文字变色</button>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const goodsId = ref(100);
+setTimeout(() => {
+  goodsId.value = 200;
+}, 1000);
+
+const getFun = (e: any) => {
+  console.log("点击事件", e);
+};
+</script>
 
 <style lang="scss" scoped></style>