1.provide（依赖）和  inject（注入） （祖传后代）

作用：祖先组件将属性或方法传递给子后代组件使用，省去多层传值的繁琐

1）祖先组件：使用provide导出

import { provide } from "vue";

provide ( "传递名","传递值" )

 2）后代组件：使用inject接收

import { inject } from "vue";

const xxx = injiect("传递名")

概念：将祖先组件的属性和方法直接传递给后代组件中，在使用祖先函数时：后代元素调用祖先组件的函数时，可以传递自身的数据给函数，然后在祖先组件中执行，从而直接改变祖先组件的数据，无需经过复杂的传参。

注意： xxx为自定义变量，传递名需要一致，传递值类型不限，仅限后代，数据是响应式的

适用范围：祖先传递后代方法

2. defineExpose （子传父）

作用：父组件调用子组件中的数据或方法

1）子组件：使用defineExpose暴露

const child= reactive({}) 

defineExpose({

    child

})

2）父组件：在子组件的标签上使用 ref = xxx  , 这个xxx变量需要声明为ref（null），使用这个声明的变量.value.传递的值或方法就可以直接进行调用。

<shopcar ref="callChild"></shopcar>

const callChild= ref(null)

function change(){//change自定义函数

        onsle.log(callChild.value.child)

}

 概念：在子组件中使用defineExpose函数将属性或方法进行暴露给父组件，父组件使用ref属性可以直接调用子组件的方法，多用于父组件调用其他组件的方法或值给子组件，从而改变子组件的数据，可同时传递多个数据。

注意：父组件必须要在子组件的标签上定义ref属性等于一个值，并将该值当作变量声明为ref（null），使用时也必须.value.去使用所需的方法或属性，同时这个defineExpose方法是异步的，所以只能在其他函数的内部使用，仅限父子，传递值类型不限，数据是响应式的

适用范围：仅限父传子

3.defineProps （父传子）

作用：使用属性绑定的方式传值给子组件

1）父组件中：将子组件的标签上绑定xxx所传递的值

<about  :pro="xxx"></about>

2）子组件中： 使用defineProps函数用数组包裹起来对应父组件的绑定名

const pro = defineProps(["pro"])

概念：将父组件的值以属性的方式传递给子组件， 子组件使用defineProps函数查找到就可以使用，这种方法是父子传值最好的方式

注意：只能传递值

适用范围：仅限父传子

4.defineEmits（子传父）

作用：在子组件中使用自定义事件的方式触发父组件的自定义事件，自定义事件无参时默认传递子组件传递的参数

1）子组件中：创建自定义事件，使用自定义 emits 回调函数进行传值 

const emits = defineEmits(['change'])  //使用defineEmits创建自定义事件

function del(){//一般在自定义函数内进行事件的触发传值

讯享网

        emits ('change' , xxx) //参数1：自定义事件 参数2：xxx自定义事件执行时的默认传参

}

2）父组件中： 在子组件标签上绑定自定义事件，然后自定义一个函数默认传参接收

<about  @change="add"></about >

 function change( item ){

         console.log( item )

        //item为子组件调用defineEmits实例的参数2 xxx

 }

概念：在子组件中使用 defineEmits方法定义一个自定义事件，同时该方法执行后会返回一个回调函数，也就是emits 这个变量，当我们使用这个回调函数时就可以触发自定义事件，并传值给父组件，传递的值不限

注意：自定义的事件必须经过defineEmits方法注册，然后使用回调的函数进行触发自定义事件，传递的值可以是任意数据类型，也可以是方法

适用范围：仅限子传父

5.Bus总线中的mitt（任意组件传递）

作用：在已调用过的组件和路由中任意传递属性和方法

1）安装模块

npm install mitt   //安装模块

2）在stores文件夹中创建一个bus.js文件（自定义名称），进行引入模块和导出实例化对象

import mitt from 'mitt'   //两行就可以了

export const bus=mitt()

3）定义接收方的函数：

import { bus } from '../stores/bus.js'  //导入js文件，解构bus实例对象

bus.on('xxx', (res) => {

  console.log(res)

//使用on方法

//参数1：定义回调函数的名称 ， 参数2：定义回调函数接收emit传递过来的参数

})

4） 定义传递方：

bus.emit('xxx', transfer) //transfer是传递的值可以为任意值和方法

概念：通过mitt函数的实例化，让导入的该实例化的对象可以对它定义事件和对应的函数，通过事件名调用其他文件在里面定义的函数

注意：使用mitt传递的值只有ref类型的是响应式的，reactive不是响应式，必须安装模块,只有被调用过的组件或路由内定义的事件监听器才会加入到该all中

适用范围：所有组件和路由

扩展辅助理解：

mitt实例化对象后拥有的四个对象属性

on：用于添加事件监听器，接受事件名称和事件处理函数作为参数。
off：用于移除事件监听器，接受事件名称和事件处理函数作为参数。
emit：用于触发事件，接受事件名称和可选的数据作为参数。
all：一个对象，存储了所有事件监听器。

6.总结

1）将函数给其他组件使用的目的大多数是为了，在其他组件中拿到所需要的值，然后再本身的函数进行操作数据。

2）传递的参数是否具备响应式，需要注意

3）组件之间的传值目的是为了区分好组件之间的关联，实现高内聚低耦合，每个组件都有各自的功能且相互独立

4) 我认为组件内部的内容，应该只能由组件本身进行改变，一旦数据发生在其他页面直接改变，那么数据的变化不再可控(非常不利于维护)，违背了组件的原意