我如何知道组件是否包含对指令的绑定

Question

我有一个名为my-custom-directive的指令 这就是我使用它的方式

<my-component
    v-model="things.value"
    v-bind:error="things.error"
    v-my-custom-directive>
</my-component>

在my-custom-directive内，如何知道my-component是否具有属性v-bind:error？

Answer 1

使用Vnode

DOM元素的

vnode.data.attrs（例如https://codepen.io/jacobgoh101/pen/RMRBbw?editors=1111）

Vue组件的

vnode.componentOptions.propsData（例如https://codepen.io/jacobgoh101/pen/wmWxqd?editors=1011）

Vue.directive("focus", {
  // When the bound element is inserted into the DOM...
  inserted: function(el, binding, vnode) {
    if (
      vnode.data &&
      typeof vnode.data.attrs !== "undefined" &&
      vnode.data.attrs.hasOwnProperty("error")
    ) {
      // is DOM
    } else if (
      vnode.componentOptions &&
      typeof vnode.componentOptions.propsData !== "undefined" &&
      vnode.componentOptions.propsData.hasOwnProperty("error")
    ) {
        // is Vue Component
    }
  }
});