将数据传递给指令？

Question

在 docs 中声明您可以将各种参数传递给指令。

所以我要传入一个值：

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(', ')
  }
})

请参阅指南的 Custom Directives 章节。

将数据传递给指令？

Pass data to a directive?

vue.js

vuejs2

vue-directives