Question

我正在使用Vue 2.0指令将Twitter Typeahead应用于输入。我已经能够以一种感觉有点像黑客的方式将值应用回Vue模型，通过循环遍历上下文，找到父对象并调用我的方法{{1} }

Vue Custom Directive的HTML设置

setAutocmpleteValue()

自定义指令

    <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()" />

在指令中，$ emit无法传递事件，是否有更好的方式来调用Vue.directive('typeahead', { inserted: function(el_, binding,v) { // this feels like a hack, is there a better way? v.context._self.parent.setAutocmpleteValue('test'); } })？

Answer 1

在Vue 2中，指令旨在for DOM manipulation。

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

它们不是用于设置数据值，尝试这样做将依赖于您正在使用的黑客攻击。

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

您实施组件要好得多。

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

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

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

从vuejs 2.0指令设置模型值

1 个答案: