vue3组件间怎么进行通信?下面本篇文章带大家了解一下vue3组件通信的几种方式,希望对大家有所帮助。

vue3组件通信方式为以下几种
- props
- $emit
- $expose / ref
- $attrs
- v-model
- provide / inject
- Vuex
- mitt
【相关推荐:《vue.js教程》】
props
$emit
//Child.vue
// 写法一
按钮
// 写法二
按钮
// Parent.vue响应
expose / ref
父组件获取子组件的属性或者调用子组件方法
立即学习“前端免费学习笔记(深入)”;
// Parent.vue 注意 ref="comp"
attts
attrs:包含父作用域除class和style除外的非props属性集合
// 父组件// 子组件
v-model
可以支持多个数据双向绑定
//子组件
provide / inject
provide/inject为依赖注入 provide:可以让我们指定想要提供给后代组件的数据 inject:在任何后代组件中接受想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用
// 父组件
//子组件
Vuex
//store/index.js
import { createStore } from 'vuex'
export default createStore({
state:{count:1},
getters:{
getCount:state=>state.count
},
mutations:{
add(state){
state.count++
}
}
})
// main.js
import { createApp } from 'vue'
import APP from './App.vue'
import store from './store'
createApp(APP).use(store).mount("#app")
// 直接使用
{{ $store.state.count }}
// 获取
mitt
Vue3中已经没有了EventBus跨组件通信,替代方案mitt.js,但原理方式EventBus是一样的
安装方式 npm i mitt -S
封装
mitt.js import mitt from 'mitt' const mitt = mitt() export default mitt
组件之间使用
// 组件A // 组件B
更多编程相关知识,请访问:编程入门!!










