vue.js - 将数据传递给指令？

Question

在文档中，它声明您可以将各种参数传递给指令。

所以我想传入一个值：

v-my-directive="test"

但我得到了错误：

Property or method "test" is not defined on the instance but referenced during render

如何将字符串传递给指令？

Answer 1

该值是一个正则 JavaScript 表达式。这样，如果你想传递一个字符串，比如说'test'，使用：

v-my-directive="'test'"

演示：

Vue.directive('my-directive', function (el, binding) {
  console.log('directive expression:', binding.value)  // => "test"
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <div v-my-directive="'test'"></div>
</div>

Answer 2

您必须引用字符串，否则它将test在您的组件上下文中查找变量（其props或data）：

v-my-directive="'test'"

在您的自定义指令中，您可以访问传递的值，如下所示binding.value：

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

请参阅指南的自定义指令章节。