如何向Vue指令传递数据？传递字符串时报错的解决方法

嘿，我来帮你理清这个问题～

先解决你遇到的字符串传递报错问题 #

你碰到的Property or method "test" is not defined报错，原因很直接：当你写v-my-directive="test"时，Vue会默认把test当作Vue实例上的响应式属性/方法去查找，如果你的data或methods里没定义这个test，自然就会抛出错误。

要传递字符串字面量，有两种简单的解决方式：

1. 用单引号把字符串包裹起来，直接写在指令中：

<div v-my-directive="'test'"></div>

这样Vue就会把'test'识别为字符串字面量，不会去实例上找对应的属性。

2. 如果需要动态拼接字符串（比如结合实例属性），可以用v-bind（缩写:），同样要把静态字符串部分用引号包裹：

<div :v-my-directive="'test-' + dynamicSuffix"></div>

（这里的dynamicSuffix是你定义在实例data里的属性）

向指令传递各类参数的通用方法 #

Vue指令支持多种传参方式，覆盖不同类型的数据和额外配置：

• 传递基本类型值（数字、布尔值、字符串）：
  数字和布尔值可以直接写，字符串按上面的方式处理：

  <!-- 传递数字 -->
  <div v-my-directive="123"></div>
  <!-- 传递布尔值 -->
  <div v-my-directive="false"></div>
  <!-- 传递字符串字面量 -->
  <div v-my-directive="'hello'"></div>
  

• 传递对象或数组：
  可以直接写字面量，或者绑定实例上的响应式对象/数组：

  <!-- 对象字面量 -->
  <div v-my-directive="{ title: 'Vue Directive', status: 'active' }"></div>
  <!-- 数组字面量 -->
  <div v-my-directive="[1, 'two', true]"></div>
  <!-- 绑定实例上的对象 -->
  <div v-my-directive="directiveData"></div>
  <!-- 对应的data定义 -->
  data() {
    return {
      directiveData: { type: 'info', content: 'Hello World' }
    }
  }
  

• 指令参数（arg）和修饰符（modifiers）：
  除了绑定的值，还可以通过参数和修饰符传递额外的配置信息，比如：

  <!-- 参数是"modal"，修饰符是"close"和"animate" -->
  <div v-my-directive:modal.close.animate="'open'"></div>
  

  在指令的定义中，你可以通过钩子函数的binding参数拿到这些信息：

  Vue.directive('my-directive', {
    bind(el, binding) {
      console.log(binding.arg); // 输出"modal"
      console.log(binding.modifiers); // 输出{ close: true, animate: true }
      console.log(binding.value); // 输出"open"
    }
  })
  

内容的提问来源于stack exchange，提问作者panthro