千鋒教育前端Vue3.0全套視頻教程(Kerwin2023版,Vue.js零基礎(chǔ)

在Vue中,父子組件之間的通信可以通過以下幾種方式實現(xiàn):
1. Props/屬性傳遞:父組件可以通過屬性(props)將數(shù)據(jù)傳遞給子組件,在子組件中使用props接收并使用這些數(shù)據(jù)。
??- 在父組件中,通過在子組件上綁定屬性:
???```html
???<ChildComponent :prop-name="data"></ChildComponent>
???```
??- 在子組件中,使用props接收父組件傳遞的屬性:
???```javascript
???props: ['propName']
???```
2. 自定義事件:子組件可以通過自定義事件向父組件發(fā)送消息,父組件使用v-on指令綁定事件監(jiān)聽器接收并處理子組件發(fā)送的消息。
??- 在子組件中,通過$emit觸發(fā)自定義事件:
???```javascript
???this.$emit('event-name', payload)
???```
??- 在父組件中,使用v-on指令監(jiān)聽子組件觸發(fā)的事件:
???```html
???<ChildComponent v-on:event-name="handleEvent"></ChildComponent>
???```
3. Vue實例作為中央事件總線:可以創(chuàng)建一個獨立的Vue實例作為中央事件總線,用于充當父子組件之間的通信媒介。在子組件中使用該實例進行事件發(fā)布和監(jiān)聽。
??- 在Vue實例中,創(chuàng)建一個事件總線:
???```javascript
???var eventBus = new Vue()
???```
??- 在子組件中,通過事件總線發(fā)布事件:
???```javascript
???eventBus.$emit('event-name', payload)
???```
??- 在父組件中,通過事件總線監(jiān)聽子組件發(fā)布的事件:
???```javascript
???eventBus.$on('event-name', handlerFunction)
???```
4. Vuex狀態(tài)管理:對于更復雜的組件通信需求,可以使用Vuex進行狀態(tài)管理。通過Vuex的store,在父子組件之間共享和管理數(shù)據(jù),實現(xiàn)數(shù)據(jù)的響應式更新。
??- 安裝Vuex并創(chuàng)建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獲取和讀取應用狀態(tài):
???```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更新應用狀態(tài):
???```javascript
???// ChildComponent.vue
???this.$store.commit('updateData', payload)
???```
這些方法是在Vue中進行父子組件通信的常見方式。具體使用哪種方式取決于應用的需求和復雜性。