Vue 中不能直接用双花括号 {{ }} 插值语法绑定 HTML 属性或 class，必须使用 v-bind（简写为 :）；同时应避免使用 style、href 等原生 HTML 属性名作为 prop 名，以防冲突。
vue 中不能直接用双花括号 `{{ }}` 插值语法绑定 html 属性或 class，必须使用 `v-bind`（简写为 `:`）；同时应避免使用 `style`、`href` 等原生 html 属性名作为 prop 名，以防冲突。
在 Vue 3 的组合式 API（<script setup>）中，向子组件传递数据并动态绑定到 DOM 属性，需严格区分两种语法场景：
- ✅ 属性绑定（如 href、class、src）：必须使用 v-bind 或其简写 :，例如 :href="link"、:class="classStyle"。这是响应式绑定，Vue 会将 prop 值作为 JavaScript 表达式求值后赋给对应属性。
- ❌ 文本插值（如按钮文字）：仅在元素内容区域（即开始与结束标签之间）使用 {{ }}，例如 <button>{{ title }}</button>。它不适用于属性值。
此外，切勿将 prop 命名为 style、href、class、id 等标准 HTML 属性名。Vue 会将这些名称视为保留字，导致 prop 定义被忽略或行为异常（如你遇到的 {{ href }} 和 {{ style }} 未解析），甚至引发编译警告或运行时错误。
以下是修正后的完整实践示例：
Parent.vue（父组件）
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
<script setup lang="ts">
import StyledButton from './StyledButton.vue'
</script>
<template>
<div class="flex">
<StyledButton link="test" title="Home" altText="To home" classStyle="top" />
</div>
</template>StyledButton.vue（子组件）
<script setup lang="ts">
defineProps({
link: { type: String, required: true },
title: { type: String, required: true },
altText: { type: String, default: '' },
classStyle: { type: String, default: 'default' }
})
</script>
<template>
<a :href="link" :aria-label="altText">
<button :class="classStyle">{{ title }}</button>
</a>
</template>✅ 关键要点总结：
- 使用语义化且非保留的 prop 名（如 link 替代 href，classStyle 替代 style）；
- 所有 HTML 属性绑定必须用 :（即 v-bind），不可用 {{ }}；
- {{ }} 仅用于模板中的文本内容插值；
- 推荐为 prop 添加类型校验与默认值（如上例所示），提升可维护性与健壮性；
- 若需动态 class（如多状态组合），可进一步使用数组语法 :class="[classStyle, isActive ? 'active' : '']" 或对象语法 :class="{ active: isActive }"。
遵循以上规范，即可安全、清晰地实现 props 到 DOM 属性与样式的响应式传递。
