vue高级组件之provide / inject

ゝ一纸荒年。 2023-05-29 05:07 2阅读 0赞

在vue中不同组件通信方式如下

1.父子组件，通过prop

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

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

1.下面是a.vue

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进行依赖，且不知道用户使用环境的情况下可以很好的使用