二 组件之间的通信方式
- 使用 props 将数据从父组件传递到子组件。
- 使用 $emit 触发父组件中的方法。
- 使用 Event Bus 创建一个中央事件总线来跨组件通信。
- 使用 Vuex 在多个组件之间共享状态。
1. 使用 props 将数据从父组件传递到子组件:
// 父组件
<template>
<div>
<ChildComponent :message="message" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data () {
return {
message: 'Hello'
}
}
}
</script>
// 子组件
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
在子组件中,你可以使用 props 属性接收父组件传递的数据。例如:
<template>
<div>
{{ name }} {{ age }}
</div>
</template>
<script>
export default {
props: ['name', 'age']
};
</script>
2. 使用 $emit 触发父组件中的方法:
// 父组件
<template>
<div>
<ChildComponent @custom="customMethod" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
customMethod (message) {
console.log(message)
}
}
}
</script>
// 子组件
<template>
<button @click="$emit('custom', 'Hello')">Emit</button>
</template>
<script>
export default {
}
</script>
3. Event Bus 并不是 Vue 3 官方推荐的通信方式
事件总线是一种常用的用于跨组件通信的方式。
事件总线通常是一个单独的对象,其他组件可以通过订阅或发布事件来与之通信。
这样,组件之间就无需直接交互,而是通过事件总线来进行通信。
下面是一个使用 Event Bus 创建事件总线的简单示例:
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;
// 然后,其他组件就可以通过调用 EventBus.$emit 来发布事件,并通过调用 EventBus.$on 来订阅事件。
// 例如,在一个组件中发布事件:
// 组件A
import EventBus from './event-bus';
EventBus.$emit('some-event', data);
在另一个组件中订阅事件:
组件B
import EventBus from './event-bus';
EventBus.$on('some-event', (data) => {
// 处理事件
});
// 注意,在使用完事件后,应该调用 EventBus.$off 来取消订阅,以避免内存泄漏。
4. 使用VueX
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: 'Hello'
},
mutations: {
updateMessage (state, message) {
state.message = message
}
},
actions: {
updateMessage ({ commit }, message) {
commit('updateMessage', message)
}
}
})
// main.js
import store from './store.js'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
// 组件 A
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapActions(['updateMessage'])
}
}
// 组件 B
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['message'])
}
}
思考:nue Vue() 做了什么