vue3组件通信使用
目录
首先，我们先了解为什么要组件拆分？
组件拆分的流程？
子组件中为什么要使用defineComponent方法？
父传子
父组件
子组件
子传父
子组件
父组件
provide和inject方法
传递数据的组件
接受数据的一方
二级嵌套接收数据的组件
组件通信的双向绑定
父组件
子组件
首先，我们先了解为什么要组件拆分？
组件拆分的目的就是为了让我们复用代码，节省我们的代码量，把共同的功能封装到一个组件中，然后在各个组件中使用
组件拆分的流程？
首先，把要拆分的数据单独拆分到一个文件中，作为子组件
在父组件中import导入子组件，components进行组件的注册
父组件使用注册子组件的标签
子组件中为什么要使用defineComponent方法？
语法严谨主要是用来检测ts的语法结构的
父传子
流程简介：
先在父组件中的子组件上绑定一个自定义属性
子组件中通过props接收数据，可以验证数据类型，设置默认值
接收的数据可以直接使用
父组件
子组件
- {{item}}
在props中接收父组件中传递过来的值
子传父
流程简介：
先在子组件中定义一个方法，方法中调用emit方法
emit方法有两个参数，第一个参数是自定义事件，第二个参数是 要传递的参数
父组件中，子组件的标签上绑定一个事件，调用自定义方法，方法的形参就是传递的数据
子组件
- {{item}}
父组件
provide和inject方法
provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据
传递数据的组件
{{name}}
接受数据的一方
二级嵌套接收数据的组件
{{names}}
组件通信的双向绑定
-
在组件通信的传递属性的时候增加个v-model指令v-model:username=“Name"
-
子组件中文本框接受数据，绑定事件$emit("update:username",传递更新的值)
v-model 和$emit() 中update配合使用
vue3中去掉了.native修饰符，所以说子传父的过程中无法辨别自定义事件是否原生事件，如果我们emit传递的事件是原生js事件名的话，这个时候父组件中事件可能会多次执行
这个时候可以在子组件中增加emits属性配置，配置子组件向父组件传递或者定义的自定义事件
父组件
子组件
$emit('update:username', e.target.value)" />