千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础
在Vue中，父子组件之间的通信可以通过以下几种方式实现：
1. Props/属性传递：父组件可以通过属性（props）将数据传递给子组件，在子组件中使用props接收并使用这些数据。
- 在父组件中，通过在子组件上绑定属性：
```html
<ChildComponent :prop-name="data"></ChildComponent>
```
- 在子组件中，使用props接收父组件传递的属性：
```javascript
props: ['propName']
```
2. 自定义事件：子组件可以通过自定义事件向父组件发送消息，父组件使用v-on指令绑定事件监听器接收并处理子组件发送的消息。
- 在子组件中，通过$emit触发自定义事件：
```javascript
this.$emit('event-name', payload)
```
- 在父组件中，使用v-on指令监听子组件触发的事件：
```html
<ChildComponent v-on:event-name="handleEvent"></ChildComponent>
```
3. Vue实例作为中央事件总线：可以创建一个独立的Vue实例作为中央事件总线，用于充当父子组件之间的通信媒介。在子组件中使用该实例进行事件发布和监听。
- 在Vue实例中，创建一个事件总线：
```javascript
var eventBus = new Vue()
```
- 在子组件中，通过事件总线发布事件：
```javascript
eventBus.$emit('event-name', payload)
```
- 在父组件中，通过事件总线监听子组件发布的事件：
```javascript
eventBus.$on('event-name', handlerFunction)
```
4. Vuex状态管理：对于更复杂的组件通信需求，可以使用Vuex进行状态管理。通过Vuex的store，在父子组件之间共享和管理数据，实现数据的响应式更新。
- 安装Vuex并创建store实例，定义state、mutations等：
```javascript
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: ''
},
mutations: {
updateData(state, payload) {
state.data = payload
}
}
})
```
- 在父组件和子组件中，通过computed或mapState获取和读取应用状态：
```javascript
// ParentComponent.vue
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data'])
}
}
```
```javascript
// ChildComponent.vue
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data'])
}
}
```
- 在子组件中，通过mutations更新应用状态：
```javascript
// ChildComponent.vue
this.$store.commit('updateData', payload)
```
这些方法是在Vue中进行父子组件通信的常见方式。具体使用哪种方式取决于应用的需求和复杂性。
