Vue.js中如何在字符串内引用string类型prop实现动态值拼接

Vue模板中要在属性值里插入prop/变量，不能直接在静态属性的引号内写插值语法，必须先用v-bind（可缩写为:）将属性标记为动态绑定，绑定后的属性值内部支持原生JavaScript表达式，可以直接用模板字符串拼接变量。

正确代码示例 #

首先确保组件已经正确声明接收valueId prop：

• Vue3 <script setup> 语法：

<script setup>
defineProps({
  valueId: {
    type: String,
    required: true
  }
})
</script>

• Vue2/选项式API语法：

<script>
export default {
  props: {
    valueId: {
      type: String,
      required: true
    }
  }
}
</script>

模板部分用动态绑定+模板字符串拼接地址：

<template>
    <div>
        <iframe 
            :src="`https://app.com/apikey=12345qwerty&valueid=${valueId}`" 
            frameborder="0"
        ></iframe>
    </div>
</template>

也可以用普通字符串拼接实现相同效果：

<iframe :src="'https://app.com/apikey=12345qwerty&valueid=' + valueId" frameborder="0"></iframe>

之前写法失效原因 #

• 直接在无:前缀的静态src属性里写${valueId}、[valueId]：静态属性的内容会被Vue完全当做纯文本解析，不会读取变量值，最终会把${valueId}这类符号原样拼到链接地址中，无法拿到传入的prop。
• 直接给src属性值套反引号且不加:前缀：不符合HTML属性语法规范，属性值无引号包裹时不能包含反引号、$、{}这类特殊字符，因此会触发ESLint解析报错。

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