vue高级组件之provide / inject

转载：https://blog.csdn.net/Garrettzxd/article/details/81407199
在vue中不一样组件通讯方式以下

1.父子组件，经过prop

2.非父子组件，经过vuex或根vue转载器

一般是以上两种状况，然而还有一种比较特殊的状况，即孙子组件或更深层次的组件通讯

1.下面是a.vue

<template>
    <div class="test">
        <son prop="data"></son>
    </div></template>

2.下面是son.vue

<template>
    <div>
        <grandson prop="data"></grandson>
    </div>
</template>
 <script>
export default {
    name: 'Son',
    props: ['data'],
}</script>

很容易看出，若是父组件须要与grandson通讯，除了vuex，必须先与son组件通讯，再由son与grandson通讯，在层级比较少的状况下也无可厚非，可是层级一旦多起来是很可怕的

有人会问为何不用vuex，简单省事，有不少为了这个引入vuex会致使代码性价比比较低，项目自己没有使用vuex的必要

那么这种状况下provide / inject就登场了

1.provide就至关于增强版父组件prop

2.inject就至关于增强版子组件的props

由于以上二者能够在父组件与子组件、孙子组件、曾孙子...组件数据交互，也就是说不只限于prop的父子组件数据交互，只要在上一层级的声明的provide，那么下一层级不管多深都可以经过inject来访问到provide的数据

1.父级组件以下

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>
 <script>
export default {
    name: 'Test',
    provide: {
        name: 'Garrett'
    }
}

2.孙子组件，注意这里是孙子组件，父级 -> 子组件 -> 孙子组件三个层级关系

<template>
    <div>
        {{name}}
    </div>
</template>
 <script>
export default {
    name: 'Grandson',
    inject: [name]}
</script>

这里能够经过inject直接访问其两个层级上的数据，其用法与props彻底相同，一样能够参数校验等

缺点

这么作也是有明显的缺点的，在任意层级都能访问致使数据追踪比较困难，不知道是哪个层级声明了这个或者不知道哪一层级或若干个层级使用了，所以这个属性一般并不建议使用,能用vuex的使用vuex，不能用的多传参几层，可是在作组件库开发时，不对vuex进行依赖，且不知道用户使用环境的状况下能够很好的使用