组件化开发是 Vue.js 的核心特性之一，允许将页面拆分成多个小的、可复用的组件，从而提高代码的可维护性和开发效率。本文将详细介绍 Vue.js 组件开发的相关知识。
一、组件基础
1. 组件定义
组件封装了 HTML、CSS 和 JavaScript 代码，定义组件有两种常见方式：全局组件和局部组件。
- 全局组件：通过
Vue.component()方法定义，全局组件可以在应用的任何地方使用。
// 定义全局组件
Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
});
- 局部组件：在 Vue 实例的
components选项中定义，局部组件只能在定义它的实例中使用。
new Vue({el: '#app',components: {'my-local-component': {template: '<div>这是一个局部组件</div>'}}
});
2. 组件使用
在模板中使用组件就像使用普通 HTML 标签一样。
<div id="app"><!-- 使用全局组件 --><my-component></my-component><!-- 使用局部组件 --><my-local-component></my-local-component>
</div>
二、组件通信
1. 父组件向子组件传递数据
通过 props 属性，父组件可以向子组件传递数据。
// 子组件定义
Vue.component('child-component', {props: ['message'],template: '<div>{{ message }}</div>'
});// 父组件使用
new Vue({el: '#app',data: {parentMessage: 'Hello from parent'},template: '<child-component :message="parentMessage"></child-component>'
});
2. 子组件向父组件传递数据
子组件可以通过自定义事件向父组件发送数据。
// 子组件定义
Vue.component('child-component', {template: '<button @click="sendMessage">Send Message</button>',methods: {sendMessage() {this.$emit('child-event', 'Hello from child');}}
});// 父组件使用
new Vue({el: '#app',methods: {handleChildEvent(message) {console.log(message);}},template: '<child-component @child-event="handleChildEvent"></child-component>'
});
3. 非父子组件通信
对于非父子组件之间的通信，可以使用事件总线（Event Bus）或 Vuex 状态管理库。
// 事件总线
const eventBus = new Vue();// 发送事件的组件
eventBus.$emit('message-sent', 'Hello from another component');// 接收事件的组件
eventBus.$on('message-sent', (message) => {console.log(message);
});
三、组件生命周期钩子
组件的生命周期钩子是在组件不同阶段自动调用的函数，可以利用这些钩子来执行特定的操作。
1. 创建阶段
beforeCreate：在实例初始化之后，数据观测和event/watcher事件配置之前被调用。created：实例已经创建完成之后被调用，在这一步，实例已经完成了数据观测、property和method的计算、watch/event事件回调的配置等。然而，挂载阶段还没有开始，$el属性目前不可用。
2. 挂载阶段
beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。mounted：挂载完成后调用，此时$el已经可用。
3. 更新阶段
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。updated：数据更新导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
4. 销毁阶段
beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。destroyed：实例销毁之后调用，所有的事件监听器和子实例都已经被销毁。
四、组件插槽
插槽允许你在组件中预留位置，父组件可以在使用组件时插入自定义内容。
// 子组件定义
Vue.component('my-slot-component', {template: '<div><slot></slot></div>'
});// 父组件使用
new Vue({el: '#app',template: '<my-slot-component>插槽显示内容</my-slot-component>'
});
