vue3 的组件通信

1、props

props主要用于父组件向子组件通信。在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。

方法一：

// 父组件 传值



// 子组件 接收

方法二：使用 setup 语法糖

// 父组件 传值




// 子组件 接收

2、$emit

$emit 也就是通过自定义事件传值，主要用于子组件向父组件通信。

在子组件的点击事件中，通过触发父组件中的自定义事件，把想传给父组件的信息以参数的形式带过去，父组件便可以拿到子组件传过来的参数值。

// 子组件 派发



// 父组件 接收

3、expose / ref

expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

// 子组件


// 父组件 

4、attrs

attrs 主要用于子组件获取父组件中没有通过 props 接收的属性。

// 父组件 传值



// 子组件 接收

5、provide / inject

provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。

inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

// 父组件


// 子组件或后代组件（不管几级子组件）

6、 v-model

v-model 主要用于父子组件中多个数据的双向绑定。

// 父组件



// 子组件

还有一种就是使用 Vuex 仓库啦！