一、数据绑定：别让模板变成“计算战场”
1. 复杂逻辑抽离到计算属性
问题：模板中写{{ user.age > 18 ? '成年' : '未成年' }}等复杂表达式，会导致模板臃肿且难以维护。
解决方案：用computed封装逻辑，兼具缓存特性（依赖不变则不重复计算）。
vue
<template> <p>{{ userStatus }}</p> </template> <script> export default { data() { return { user: { age: 20 } } }, computed: { userStatus() { // 逻辑抽离，模板更清晰 return this.user.age > 18 ? '成年' : '未成年' } } } </script>
2. v-model 绑定类型要“专一”
问题：输入框绑定number类型却意外赋值字符串，导致123 + 456 = "123456"等逻辑错误。
解决方案：指定v-model修饰符或在数据更新时强制类型转换。
vue
<!-- 输入框自动转为数字 --> <input v-model.number="age" type="number"> <script> export default { data() { return { age: 0 } }, // 初始化为 number 类型 watch: { age(newVal) { this.age = Number(newVal) } // 双重保险 } } </script>
---
二、父子组件通信：遵守“单向数据流”铁律
1. 子组件绝不直接修改 props
问题：子组件直接修改props数据（如this.message = '新内容'），会导致数据源头混乱，难以追溯。
正确流程：子组件通过$emit触发事件，父组件接收后更新数据。
vue
<!-- 子组件 Child.vue --> <template> <button @click="updateParent">修改标题</button> </template> <script> export default { props: ['title'], // 只读 props methods: { updateParent() { this.$emit('update-title', '新标题') // 触发事件传递数据 } } } </script> <!-- 父组件 Parent.vue --> <template> <Child :title="parentTitle" @update-title="parentTitle = $event" /> </template> <script> export default { data() { return { parentTitle: '旧标题' } } } </script>
2. 复杂数据传递用 .sync 或 v-model 语法糖
场景：父子组件频繁双向同步数据（如弹窗开关、表单输入）。
vue
<!-- 父组件：.sync 简化事件监听 --> <Child :visible.sync="isShow" /> <!-- 等价于 <Child :visible="isShow" @update:visible="isShow = $event" /> --> <!-- 子组件：触发 update:prop 事件 --> <script> methods: { close() { this.$emit('update:visible', false) } } </script>
---
三、跨组件通信：选对工具不“滥用”
1. 小型项目用事件总线（EventBus）
适用场景：非父子组件（如兄弟组件、祖孙组件）简单通信。
javascript
// 1. 创建事件总线（main.js） Vue.prototype.$bus = new Vue() // 2. 发送组件 this.$bus.$emit('user-login', { name: '小明' }) // 3. 接收组件（需在 beforeDestroy 解绑） created() { this.$bus.$on('user-login', (user) => { this.currentUser = user }) }, beforeDestroy() { this.$bus.$off('user-login') // 防止内存泄漏 }
2. 中大型项目用 Vuex/Pinia
核心优势：集中管理状态，避免事件总线“事件满天飞”难以维护。
javascript
// Vuex 示例：购物车数据共享 // store/index.js state: { cart: [] }, mutations: { addToCart(state, goods) { state.cart.push(goods) } } // 组件中调用 this.$store.commit('addToCart', { id: 1, name: '商品
3. 祖孙组件用 provide/inject
适用场景：深层嵌套组件（如爷爷→孙子）传递数据，避免 props 层层透传。
vue
<!-- 祖先组件 provide 数据 --> <script> export default { provide() { return { theme: 'dark' } } } </script> <!-- 后代组件 inject 接收 --> <script> export default { inject: ['theme'], // 直接使用 this.theme mounted() { console.log(this.theme) // 'dark' } } </script>
