javascript - 我如何知道某个组件是否包含指令上的绑定(bind)

我有一个名为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？

最佳答案

通过使用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
    }
  }
});