Vue3组件通信

前言：

        在组件化开发中，需要将页面抽离成组件的形式，抽离之后就涉及到了组件中数据传递，可分为：父传子（props）、子传父（emits）、祖孙通信（provide和inject）、兄弟通信、全局通讯（pinia）。这次我就以博客的形式复习一下前三种通讯，想了解pinia可点击看我前面写的博客。

1.父传子

        首先需要在父组件中的子组件标签中添加自定义属性，将需要传递的值放如自定义属性中，在子组件中通过defineProps这个方法获取父组件传递过来的值。具体方法如下：

father.vue:
 

Chlid.vue:

         从上可以看出，不只有数据可以传递，方法也是可以传递给子组件的。子组件在接收时，需要给数据标注类型。

2.子传父

1.defineExpose+ref

        使用defineExpose+ref的方式将子组件中的数据传递给父组件，首先在子组件中定义数据，使用defineExpose方法将数据暴露出去，在父组件中通过ref来接收。

chlid.vue:

father:

2.v-model

        知道了如何将子组件中的数据如何传递给父组件，那如何在子组件中修改父组件中的数据呢，使用到了v-model + defineEmits的方法，首先在父组件中定义一个数据，在其子组件标签上添加v-model:名称 = '定义的数据名称'，在子组件中通过defineProps接收传递过来的数据，然后使用defineEmits通知父组件去修改数据，这边我写了一个小例子，代码如下：

father.vue:

chlid.vue:

        这里例子的意思是，我修改表单的数据时，父组件中对应的数据也会跟着修改，这里有一点需要注意，在通知父组件修改数据的参数，第一个参数是update:content，需要加上update，content需要跟父组件中的子组件标签上的v-model:content中content对应。

        在实际开发中父传子和子传父是使用频率最高的。

3.祖孙通信

        当需要进行跨组件通信时可以使用到provide和inject（依赖注入）。

        具体使用：在祖先组件中通过provide配置向后代组件提供数据。在后代组件中通过inject配置来声明接收数据。

app.vue:

chlid.vue:

        这样我们就可以获取到祖先组件传来的数据了

结语：

        组件通信是Vue开发中的核心技能，掌握多种通信方式可以灵活应对不同场景的需求。从简单的父子通信到复杂的跨层级通信，合理选择方法能让代码更清晰、维护更方便。