将数据传递给指令? [英] Pass data to a directive?

问题描述

在 docs 中，它指出您可以将各种参数传递给指令.

所以我想传入一个值:

v-my-directive="test"

但我收到错误:

属性或方法test"未在实例上定义，但在渲染期间被引用

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

解决方案

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

v-my-directive="'test'"

演示:

Vue.directive('my-directive', function (el, binding) {console.log('directive expression:', binding.value)//=>测试"})新的 Vue({el: '#app',数据: {消息:你好 Vue.js！"}})

<script src="https://unpkg.com/vue"></script><div id="应用程序"><p>{{消息}}</p><div v-my-directive="'test'"></div>

In the docs it states that you can pass various arguments to a directive.

So I want to pass in a value:

v-my-directive="test"

But I get the error:

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

How can I pass in a string to a directive?

解决方案

The value is a regular JavaScript expression. This way, if you want to pass a string, say 'test', use:

v-my-directive="'test'"

Demo:

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>

这篇关于将数据传递给指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！