一、父传子

1.基于props的attribute

Vue3—05—组件通信_ide

当是一个基本数据类型时,随便;初始化多个组件实例时,虽然基本数据类型的值相同但是地址都初始化了不同,只是值进行了拷贝,所以修改本实例数据地址的值不会影响其他实例的值;

当是一个引入数据类型时,需要返回一个函数,不然会造成多个组件实例修改同一份数据的情况;原因是大家的地址里保存的不是值,而是一个相同的引用地址,而这个引用地址相同的话,那么修改时又会相同;如果每次初始化一个函数,那么每次引用地址都不会相同;

Vue3—05—组件通信_基本数据类型_02

 2.基于非props的attribute

首先如果只有一个根节点,默认绑定在子组件template模板的根节点上

其次如果只有一个根节点并且不希望默认绑定在根节点上,需要inheritAttrs.false禁用,然后在标签里通过v-bind的¥attrs来调用

最后如果有多个根节点,则必须指定某个根节点;

Vue3—05—组件通信_ide_03

 

 

 Vue3—05—组件通信_初始化_04

 

 

 

二、子传父

Vue3—05—组件通信_初始化_05

 

 Vue3—05—组件通信_ide_06

 

 Vue3—05—组件通信_数据类型_07

 

 

 

 

三、父孙组件(非父子组件)

 

Vue3—05—组件通信_基本数据类型_08

 

 Vue3—05—组件通信_数据类型_09

 

需要使用provide()代替provie{}, 因为对象里的方法是有this的,而这个this指向的是对象,再加上vue的代理this=this.data,所以就可以访问到data里的数据了;

 Vue3—05—组件通信_数据_10

 

 Vue3—05—组件通信_ide_11