Vue组件属性内{{}}插值不生效，如何正确使用模板字面量？

问题原因 #

Vue 的{{ }}插值语法仅支持在模板的文本内容节点中使用，不能直接用在HTML/组件的属性值里，这是和React JSX里属性可以直接嵌套表达式的核心差异点。

实现方案 #

属性值需要动态拼接的话，要使用v-bind:指令（可简写为:），属性值内写JS表达式，用模板字符串拼接即可：

<template>
  <!-- 用v-bind绑定close-text属性，值为JS模板字符串 -->
  <a-alert message="Info Text" type="info" :close-text="`Close ${myVar}`" />
  {{myVar}} /* it works here */
</template>

补充规则 #

• 加了:前缀的属性，Vue会把双引号里的内容当作JS表达式执行，而不是普通静态字符串
• 除了模板字符串，也可以用普通字符串拼接写法：:close-text="'Close ' + myVar"，二者效果完全一致
• 所有原生属性、组件自定义属性需要嵌入动态值，都要遵循v-bind绑定规则，不能直接在属性的静态字符串里插入{{}}语法

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