从 vuejs 2.0 指令设置模型值答案

【问题标题】：setting model values from a vuejs 2.0 directive从 vuejs 2.0 指令设置模型值
【发布时间】：2018-02-27 08:31:30
【问题描述】：

我正在使用 Vue 2.0 指令将 Twitter Typeahead 应用于输入。我已经能够通过循环上下文、找到父对象并调用我的方法 setAutocmpleteValue()

Vue 自定义指令的 HTML 设置

    <input class="typeahead" type="text" placeholder="Search" name='typeahead'
        v-typeahead="getFieldValues(part.fieldName)"  
        v-model="part.value" v-bind:value="part.value"
        v-on:change="updateTest()" @input="onValidChange()" />

自定义指令

Vue.directive('typeahead', {
    inserted:  function(el_, binding,v) {
         // this feels like a hack, is there a better way?
         v.context._self.parent.setAutocmpleteValue('test');
     }
})

在指令中 $emit 不能用于传递事件，有没有更好的方法来调用 setAutocmpleteValue()？

【问题讨论】：

标签： vuejs2

【解决方案1】：

在 Vue 2 中，指令用于 for DOM manipulation。

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

它们不适用于设置数据值，并且尝试这样做将依赖于您正在使用的 hack。

不仅如此，这是一种非常脆弱的方法。问题中的指令取决于当前上下文父级中的方法。如果输入元素低于或低于两级怎么办？

你最好实现一个组件。

但是，鉴于您已经在进行黑客攻击，$emit 可以从context 获得。

v.context.$emit("some-event", someData)

context 是 Vue 或 Vue 组件，其中包含您已将指令附加到的元素，因此您希望从该组件的父级监听它。

【讨论】：