将数据传递给指令？答案

【问题标题】：Pass data to a directive?将数据传递给指令？
【发布时间】：2018-10-04 22:05:19
【问题描述】：

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

所以我想传入一个值：

v-my-directive="test"

但我得到了错误：

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-directives

【解决方案1】：

您必须引用该字符串，否则它将在您的组件上下文中查找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 章节。

【讨论】：

console.log(el.value);这个是空白的。
在指令中你必须使用binding.value 来访问值

【解决方案2】：

该值是一个正则 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>

【讨论】：

console.log(el.value);这个是空白的。
实际上应该是console.log(binding.value)。
谢谢 - 错过了！
添加了一个演示，以防万一。