目录

首先，我们先了解为什么要组件拆分？

组件拆分的流程？

子组件中为什么要使用defineComponent方法？

 父传子

父组件

子组件

子传父

子组件

父组件

provide和inject方法

传递数据的组件

接受数据的一方

二级嵌套接收数据的组件

组件通信的双向绑定

 父组件

子组件

首先，我们先了解为什么要组件拆分？

        组件拆分的目的就是为了让我们复用代码，节省我们的代码量，把共同的功能封装到一个组件中，然后在各个组件中使用

组件拆分的流程？

        首先，把要拆分的数据单独拆分到一个文件中，作为子组件

        在父组件中import导入子组件，components进行组件的注册

        父组件使用注册子组件的标签

子组件中为什么要使用defineComponent方法？

        语法严谨主要是用来检测ts的语法结构的

 父传子

流程简介：

先在父组件中的子组件上绑定一个自定义属性

子组件中通过props接收数据，可以验证数据类型，设置默认值

接收的数据可以直接使用

父组件

子组件

在props中接收父组件中传递过来的值

子传父

流程简介：

        先在子组件中定义一个方法，方法中调用emit方法

        emit方法有两个参数，第一个参数是自定义事件，第二个参数是 要传递的参数

        父组件中，子组件的标签上绑定一个事件，调用自定义方法，方法的形参就是传递的数据

子组件

父组件

provide和inject方法

provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据

传递数据的组件

接受数据的一方

二级嵌套接收数据的组件

组件通信的双向绑定

1. 在组件通信的传递属性的时候增加个v-model指令v-model:username=“Name"

2. 子组件中文本框接受数据，绑定事件$emit("update:username",传递更新的值)

v-model 和$emit() 中update配合使用

vue3中去掉了.native修饰符，所以说子传父的过程中无法辨别自定义事件是否原生事件，如果我们emit传递的事件是原生js事件名的话，这个时候父组件中事件可能会多次执行

这个时候可以在子组件中增加emits属性配置，配置子组件向父组件传递或者定义的自定义事件

 父组件

子组件