2024年06月11日 建站教程
父子组件利用props通信：
js
// 父组件
<son :msg="message"></son>
// 子组件
props: {
msg: String
}
父子组件利用ref通信：
js // 父组件 <son ref="son"></son> // 通过ref访问子组件实例 this.$refs.son.doSomething()
父子组件利用emit通信：
js
// 子组件
this.$emit('someEvent', data)
// 父组件
<son @someEvent="doSomething"></son>
methods: {
doSomething(data) { ... }
}
利用 event bus 分发事件完成非父子关系的通信：
js
// bus.js
export default new Vue()
// componentA
import bus from './bus'
bus.$emit('eventName', data)
// componentB
import bus from './bus'
bus.$on('eventName', (data) => { ... })
利用provide/inject实现祖代后代组件通信：
js
// 祖先组件
provide: {
name: 'blue'
}
// 后代组件
inject: ['name']
本文链接：http://so.lmcjl.com/news/6334/