Vue里的每个组件就像一个个小房子，既能独当一面，也可以和别的房子凑成一家人。但这家人的孩子多了，怎么传话？今儿咱们就聊聊Vue组件间咋更好地沟通，看看哪个方法最管用！
使用props和$emit
首先告诉你两个基础知识：prop就像是爸妈给咱们的遗产；$emit，就是咱向爸妈挥手示意要啥。虽然这个办法简单直接，但是在层层嵌套的组件中，每传一次都是走一大圈，就像绕道邮局，既麻烦还容易出错。
其实，当组件和props、$emit变得越来越复杂时，代码里全是这些玩意儿，看起来就跟一团乱麻似的。要想维护起来可真费劲，一不小心可能得把整套都换新，真心令人头疼。
使用EventBus
import ChildComponent from './ChildComponent.vue'
export default {
data() {
return {
message: ''
}
},
components: {
ChildComponent
},
methods: {
updateMessage(newMessage) {
this.message = newMessage
}
}
}
export default {
props: {
message: {
type: String,
default: ''
}
},
methods: {
sendMessage() {
this.$emit('update-message', 'Hello, Vue!')
}
}
}
然后来谈谈EventBus这货，就像社区里的大喇叭，啥事儿都能喊出来听进去。虽说是简化了传递信息的麻烦，结果却添了新的乱子。
想象一下，如果我们可以随意向广播站发声，那里就会像个嘈杂的市场，各种消息挤作一团，让人傻傻分不清楚。同样道理，如果代码中的每颗“螺丝钉”都可以随心所欲地触发事件，就很容易出现名字重复、混乱不堪的情况，让人摸不着头脑。
还有，因为它们都是通过闹钟气候的方式沟通交流的，就像是我们在玩猜谜游戏。对于初学者来说，要搞懂这些，可能会让学习过程变得更困难！
使用Vuex
import Vue from 'vue' export default new Vue()
你知道Vuex吗？其实就跟个大大的仓库差不多，把所有数据全放在那里，组件要用的话直接去取，不用了再放回去。这样子就不会因为层层传递数据而变慢，还能让事件处理得更清晰。
import ChildComponent from './ChildComponent.vue'
import EventBus from './EventBus.js'
export default {
components: {
ChildComponent
},
mounted() {
EventBus.$on('update-message', (newMessage) => {
this.message = newMessage
})
}
}
搞定Vuex真特么麻烦。首先，代码变得超级复杂，每个组件都得跟store拉关系才能取得数据，而且还得弄个commit来改变数据。感觉就好像每次要拿到啥都得走一大堆步骤，虽然稳妥，但是真心麻烦
import EventBus from './EventBus.js'
export default {
methods: {
sendMessage() {
EventBus.$emit('update-message', 'Hello, Vue!')
}
}
}
说白了，有些小项目其实根本没必要用Vuex这类高级玩意儿，就像拿大炮打蚊子，纯粹是吃饱撑得没事干，弄不好还可能闹出乱子来。
总结
说实话，处理Vue组件间的通讯，你可以试试Prop和$emit、EventBus或者Vuex这些方法。但哪款最顺手，就得靠你个人体验！
作为小项目的开发人员，你用props和$emit就够了。但是要是搞大项目的话，就要考虑EventBus或Vuex了。记得把代码弄得简单明了、好维护！
好，聊聊天嘛：你觉得哪种组件通信法最顺手？赶紧给咱们说说哈～别忘了顺便给你亲眼所见的这篇文章一波点赞或者分享，让其他搞开发的兄弟姐妹也知道这个实用技巧！
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
updateMessage(state, newMessage) {
state.message = newMessage
}
}
})
评论0