Vue组件通信详解
在Vue开发中,一个页面往往由多个组件组成。而这些组件之间的通信是Vue开发中非常关键的部分。本文将介绍Vue中组件之间的通信方式。
1、props和$emit
//父组件 <template> <div> <child :message="message" @update-message="updateMessage" /> </div> </template> <script> import child from './child.vue' export default { data() { return { message: 'hello Vue' } }, methods: { updateMessage(newMessage) { this.message = newMessage } }, components: { child } } </script> //子组件 <template> <div> {{ message }} <button @click="changeMessage">改变父组件的message</button> </div> </template> <script> export default { props: { message: String }, methods: { changeMessage() { this.$emit('update-message', '你好Vue') } } } </script>
2、$attrs和$listeners
//父组件 <template> <div> <child name="name1" age="18" @eventName="eventName"></child> </div> </template> <script> import child from './child.vue' export default { components: { child }, methods: { eventName(e) { console.log(e) } } } </script> //子组件 <template> <div> <p>{{ name }} : {{ age }}</p> <button @click="$emit('eventName', '我是子组件传出去的数据')">点击传出数据</button> </div> </template> <script> export default { inheritAttrs: false, // 不继承父组件的属性 props: ['name', 'age'], // 父组件传递的props mounted() { console.log(this.$attrs) // 打印父组件传递的所有属性 console.log(this.$listeners) // 打印父组件传递的所有事件 } } </script>
3、eventBus
// eventBus.js import Vue from 'vue' export default new Vue() // a.vue <template> <div> <button @click="click">触发事件</button> </div> </template> <script> import eventBus from './eventBus' export default { methods: { click() { eventBus.$emit('eventName', 'hello world') } } } </script> // b.vue <template> <div> <p>{{ message }}</p> </div> </template> <script> import eventBus from './eventBus' export default { data() { return { message: '' } }, mounted() { eventBus.$on('eventName', message => { this.message = message console.log(message) }) } } </script>
总结:以上三种方式都是Vue组件通信的常用方式,根据不同的场景选择不同的方式即可。