vue3 字符串里面有变量 反引号(``)来定义模板字符串,并且hello,world来简单说明
定义模板字符串
在 Vue 3 中,如果你想在模板字符串中嵌入变量,你可以使用反引号(``)来定义模板字符串,并在其中使用花括号 {}
来插入变量。这种方式被称为模板字符串插值。
使用模板字符串(反引号)的场景
通常情况下,你不需要使用反引号(``)来嵌入变量到 Vue 模板中,因为 Vue 的模板语法已经提供了足够的方式来处理这种需求。但是,如果你需要在 JavaScript 代码中直接构建一个包含变量的字符串(例如,在计算属性、方法或事件处理函数中),你可以使用模板字符串:
const message = `hello, ${name.value}!`;
这里,${name.value}
是模板字符串中的插值表达式,它会被替换为 name
变量的当前值。注意在使用这种方式时,你需要访问 ref
的 .value
属性来获取其值,因为 ref
是一个响应式引用。
测试方法中使用模板字符串
async function changeTab(tab: keyof typeof tabs) {
currentTab.value = tab
await nextTick()
console.log(compRef.value!.msg!)
count.value++
compRef.value!.setMsg(`${compRef.value!.msg!} - ${count.value}`)
}
这里面的 compRef.value!.msg! 与 count.value 是二个变量
说明:
setMsg给子组件传值,参数:一个字符串,中间有二个变量。通过`${变量}`的形式处理。