Vue3的7种种组件通信详情 Vue3的7种种组件通信详情

1、Vue3 组件通信方式
2、Vue3 通信使用写法

2.1 props
2.2 $emit
2.3 expose / ref
2.4 attrs
2.5 v-model
2.6 provide / inject
2.7 Vuex

1、Vue3 组件通信方式

props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex

2、Vue3 通信使用写法
2.1 props
用 props 传数据给子组件有两种方法，如下
【Vue3的7种种组件通信详情】方法一：混合写法

// Parent.vue 传送// Child.vue 接收

方法二：纯 Vue3 写法

// Parent.vue 传送// Child.vue 接收

注意：

如果父组件是混合写法，子组件纯 Vue3 写法的话，是接收不到父组件里 data 的属性，只能接收到父组件里 setup 函数里传的属性
如果父组件是纯 Vue3 写法，子组件混合写法，可以通过 props 接收到 data 和 setup 函数里的属性，但是子组件要是在 setup 里接收，同样只能接收到父组件中 setup 函数里的属性，接收不到 data 里的属性
官方也说了，既然用了 3，就不要写 2 了，所以不推荐混合写法。下面的例子，一律只用纯 Vue3 的写法，就不写混合写法了

2.2 $emit
// Child.vue 派发

// Parent.vue 响应

2.3 expose / ref
父组件获取子组件的属性或者调用子组件方法

// Child.vue// Parent.vue注意 ref="comp"

2.4 attrs
attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

// Parent.vue 传送// Child.vue 接收

2.5 v-model
可以支持多个数据双向绑定

// Parent.vue// Child.vue

2.6 provide / inject
provide / inject 为依赖注入

provide：可以让我们指定想要提供给后代组件的数据或
inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

// Parent.vue// Child.vue

2.7 Vuex

// store/index.jsimport { createStore } from "vuex"export default createStore({state:{ count: 1 },getters:{getCount: state => state.count},mutations:{add(state){state.count++}}})// main.jsimport { createApp } from "vue"import App from "./App.vue"import store from "./store"createApp(App).use(store).mount("#app")// Page.vue// 方法一直接使用// 方法二获取

到此这篇关于Vue3的7种种组件通信详情的文章就介绍到这了,更多相关Vue3的7种种组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！