Vue 单文件组件(SFC) 的模板语法--1

张开发
• 2026/5/13 7:02:33 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Vue 单文件组件(SFC) 的模板语法--1
KZTLogo secondLevelsecondLevel v-showmenuShow topic 控制台 :menuShowmenuShow /上述代码是 Vue 单文件组件(SFC) 的模板语法主要包含以下三种 Vue 指令和绑定语法1. 事件监听 event (或 v-on)secondLevel“secondLevel”作用监听子组件 KZTLogo触发的 secondLevel 事件等价写法v-on:secondLevel“secondLevel”说明当子组件通过 this.$emit(‘secondLevel’) 触发事件时会调用父组件中定义的 secondLevel 方法是 子组件 → 父组件通信 的标准方式2. 条件显示 v-showv-show“menuShow topic ‘控制台’”作用基于表达式动态控制组件显示/隐藏实际通过 CSS display 切换执行逻辑当 menuShow 为 true 且 topic 等于字符串 ‘玄龙控制台’ 时显示组件否则隐藏但 DOM 仍存在对比 v-ifv-show 适用于频繁切换的场景性能更好v-if 会完全销毁/重建 DOM 元素适合不频繁变化的条件3. 属性绑定 :prop (或 v-bind):menuShow“menuShow”作用将父组件的 menuShow 数据动态传递给子组件的 menuShow prop等价写法v-bind:menuShow“menuShow”说明实现了 父组件 → 子组件 的数据流子组件需在 props 中声明接收该属性// KZTLogo.vue 中需定义 props: { menuShow: Boolean // 假设为布尔类型 }完整关联关系图示graph LR A[父组件 App.vue] --|1. :menuShowmenuShow| B[子组件KZTLogo] B --|2. secondLevelsecondLevel| A A --|3. v-show 控制显示| B如果需要更深入的用法解释或实际场景示例可以进一步说明

更多文章