vue动态指令

vue 在 2.6.0 版本的时候新增了动态参数，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

1
<a v-bind:[attributeName]="url"> ... </a>

这里的attributeName·会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

1
2
3
4
5
6
export default {
  data () {
    return { attributeName: "href" }
  }
}

v-bind:[attributeName] 等同于 :bind:href='url'

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

1
2
3
4
5
6
7
8
<a v-on:[eventName]="doSomething"> ... </a>

export default {
  data () {
    return { eventName: "focus" }
  }
}

在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束：

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束：

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

1
2
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
<a v-bind:[someAttr]="value"> ... </a>

export default {
  data () {
    return { bar: "bar" }
  },
  computed: {
    someAttr () {
      return 'foo' + bar
    }
  }
}

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

1
2
3
4
5
6
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

1
2
3
4
5
6
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

总结

1
2
3
4
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
1
2
3
4
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 动态的插槽名 (2.6.0+) -->
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
<!-- 动态的插槽名缩写 (2.6.0+) -->
<base-layout>
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>