vue3 将自定义指令绑定在组件上无效

Question

<template>
  <div v-demo:name="name"></div>
  <HelloWorld v-demo:name="name"></HelloWorld>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  directives: {
    demo: {
      mounted(el: HTMLElement, binding, vnode) {
        console.log(el, binding, vnode);
      },
    },
  },
  data() {
    return {
      name: "my name",
    };
  },
});
</script>

我同时将指令绑定在dom和组件上，但是只有dom做出了反应，这在vue3中是为什么.

Answer 1

组件问题

<template>
 <p>组件内:</p>
 <input type="text" v-model="name" />
</template>

向上面的写法，就不会触发，需要加上根元素

<template>
  <div>
    <p>组件内:</p>
    <input type="text" v-model="name" />
  </div>
</template>

ok.