Vue项目中如何处理组件之间的各种通信？

父子组件利用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']

Vue Element Admin项目官网使用网址，采用最新的前端技术栈

vue项目开发中一般会出现哪些报错？（vue常见的10种错误）

Vue项目中如何使用过滤器（代码介绍）？

Vue项目开发如何利用Axios调试

Vue项目开发如何添加请求拦截器和响应拦截器

标签： emit通信, props通信, ref通信, vue开发, Vue通信

上面是“Vue项目中如何处理组件之间的各种通信？”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_5137.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！