vue父组件向子组件的子组件通信，爷孙通信，provide,inject高阶用法

我们在vue中，如果遇到组件层级嵌套过深的时候，需要父组件向子组件或者子组件的子组件通信的时候，可以使用provide,inject去实现

在祖宗组件中使用prvide向下每一个子组件暴露方法或者数据

export default {
  provide(){
    return{
      scrollTo:this.scrollTo,//方法
      msg:'需要传递的数据'
    }
  },
}

然后在下面的每一个子组件或者子组件的子组件中可以通过injict获取

export default {
  inject:[
  'scrollTo','msg'
],

//使用
this.scrollTo()
this.msg

使用这种方法，无论层级嵌套多深，在祖先组件中暴露方法或数据，都可以在后代组件中拿到

还有一种是用$attrs去实现

vue3的传参可以借鉴这篇文章：Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）_vue3 $attr-CSDN博客

下面的内容借鉴了这个网址：https://www.cnblogs.com/gg-qq/p/13952132.html

直接在我这里看也是一样

vue官网定义如下：

　　包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

父组件

//父组件
<template>
    <div style="background: aquamarine">
        <div>Here is Father</div>
        <son :sonAge=20 :grandsonAge=10></son>
    </div>
</template>

<script>
    import Son from "./Son";
    export default {
        name: "Father",
        components: {
            Son
        },
    }
</script>

<style scoped>

</style>

子组件

<template>
    <div style="background: antiquewhite">
        <div>Here is Son</div>
        <div>Son age:{{$attrs.sonAge}}</div>
        <grandson v-bind="$attrs"></grandson>
    </div>
</template>

<script>
    import Grandson from "./Grandson";
    export default {
        name: "Son",
        components: {
            Grandson
        },
    }
</script>

<style scoped>

</style>

孙子组件

<template>
    <div style="background: gainsboro">
        <div>Here is Grandson</div>
        <div>Grandson age: {{$attrs.grandsonAge}}</div>
    </div>
</template>

<script>
    export default {
        name: "Grandson",
    }
</script>

<style scoped>

</style>

出来就是这样的