v-bind的自定义Vue指令

Question

我目前有这样的东西：

<q-input v-model="value" label="Some Label" v-bind="getDefaults('someId')" />

其中，getDefaults()是：

function getDefaults (id) {
  return {
      'id': id,
      'clearable': true,
      'lazy-rules': true,
      'outlined': true,
      'class': 'form-padding'
       // more props/parameters
   }
}

现在，我想将v-bind转换为自定义指令。

export const sampleDirective = {
  inserted: function (el, binding) {
    // this doesn't work
    el.class += 'form-padding'
    // how to set id from here
    // and how to set the props as well (like ```clearable```, ```lazy-rules```, etc)?
  }
}

那么，我如何从自定义指令中设置这些参数/属性，这样我就可以像这样调用它：

<q-input v-model="value" label="Some Label" v-sampleDirective="{ id: 'someId' }" />

谢谢!

Answer 1

根据documentation的说法

请注意，在Vue 2.0中，代码重用和抽象的主要形式是组件-然而，在某些情况下，您可能需要对普通元素进行一些低级DOM访问，而这正是自定义指令仍然有用的地方。

所以有一件事是明确的，道具是不可能的；你必须使用默认提供的指令，比如v-bind，因为你不能访问/改变除了原始DOM元素之外的任何东西。默认提供的指令在编译组件以呈现函数时的工作方式有所不同；自定义指令的工作方式不同，只允许修改 DOM元素。

更清楚的是，像v-if，v-else这样的指令在模板中使用，在render函数中转换为javascript if-else子句，类似于v-for在render函数中转换为for循环。

至于DOM元素的类、id和其他属性，您可以使用原生javascript DOM API(如element.classList.add("my-class")或element.setAttribute('id', 'something')等)对其进行修改。

注意:我个人对命名custom directive的看法导致了包括我在内的一些人的困惑，即custom directive等同于vue的指令，如v-for，可以由API用户构造，但事实并非如此。

TL DR；

你不能这么做！