#在组件中使用

vicky.yu

在 3.0 中，有了片段支持，组件可能有多个根节点。如果在具有多个根节点的组件上使用自定义指令，则会产生问题。

要解释自定义指令如何在 3.0 中的组件上工作的详细信息，我们首先需要了解自定义指令在 3.0 中是如何编译的。对于这样的指令：

<div v-demo="test"></div>
将大概编译成：

const vDemo = resolveDirective('demo')
return withDirectives(h('div'), [[vDemo, test]])
其中 vDemo 是用户编写的指令对象，其中包含 mounted 和 updated 等钩子。

withDirectives 返回一个克隆的 VNode，其中用户钩子被包装并作为 VNode 生命周期钩子注入 (请参见渲染函数更多详情)：

{
  onVnodeMounted(vnode) {
    // call vDemo.mounted(...)
  }
}
因此，自定义指令作为 VNode 数据的一部分完全包含在内。当在组件上使用自定义指令时，这些 onVnodeXXX 钩子作为无关的 prop 传递给组件，并以 this.$attrs 结束。

这也意味着可以像这样在模板中直接挂接到元素的生命周期中，这在涉及到自定义指令时非常方便：

<div @vnodeMounted="myHook" />
这和 非 prop 的 attribute类似。因此，组件上自定义指令的规则将与其他无关 attribute 相同：由子组件决定在哪里以及是否应用它。当子组件在内部元素上使用 v-bind="$attrs" 时，它也将应用对其使用的任何自定义指令。