Vue组件编写注意事项·标签重名·- 父子组件通过props和事件来聊天

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

Vue组件编写注意事项

在Vue里写组件，有几个地方特别要注意，这样不仅能让你写出来的代码看起来舒服，还能让应用跑得快。

一、组件的命名规范

组件名字很重要，得挑好。得这样来命名： - 单词拼写：用多个单词，别跟HTML标签重名，比如 "myComponent"。 - 命名风格：用大驼峰法（比如 "MyComponent"）或者短横线法（比如 "my-component"）。 - 文件名一致：文件名要跟组件名一样，这样找起来方便，比如 "MyComponent.vue"。

二、数据传递和管理

组件间数据怎么来来回回，这是关键。 - Props传递：像传礼物一样，父组件给子组件传递数据，得注明是什么礼物（类型）和默认礼物（值）。

类型	示例
String	name: 'John'
Number	age: 30
Boolean	isStudent: true
Array	hobbies: ['reading', 'swimming']
Object	info: { occupation: 'developer' }
Function	callback: () => console.log('Hello!')

- 事件发射：子组件想告诉父组件什么，就发个信号（事件），父组件接收到信号后，就知道怎么做了。 - 状态管理：数据复杂的时候，得用Vuex来管着，别让状态乱成一锅粥。

三、生命周期钩子函数

组件从出生到老去，每个阶段都有特殊的日子（钩子函数）。 - created：组件刚被创建，这时候适合搞些初始化数据。 - mounted：组件挂到页面上，这时候可以操作DOM。 - updated：数据更新了，这时候可以处理更新后的逻辑。 - destroyed：组件要挂了，这时候适合清理工作。

四、组件通信

组件间要能说话，才能一起工作。 - 父子组件：通过props和事件来聊天。 - 兄弟组件：用个“信使”（Event Bus）来传话。 - 跨层级：Vuex就是个大喇叭，大家都能听到。

五、性能优化

应用大的时候，得注意点性能，不能让应用卡住。 - 懒加载：需要的时候再加载组件，就像按需买衣服。 - 避免重渲染：尽量别让组件不停地刷新。 - 计算属性和侦听器：用计算属性和侦听器来减少工作量。把组件写得规范，数据传递得当，生命周期玩得转，通信无障碍，性能还优化，这样你的Vue应用就能像开了挂一样。记得在实际开发中，随时关注这些要点，让你的Vue之旅更加顺畅！