【组件通信 provide 和 inject 】使用

目录

前提

provide和inject

使用

缺点

---

 前提

近期研究Element源码，里面遇到了provide 和 inject；以前未用过，现在进行了一个小小的调研，此处需要针对项目的需求进行不同方式的引用！曾用过session、localStorage、vuex、prop;

1. 父子组件，通过prop ； props是一层一层向下传的，比较笨重；如需引用，只能父子传递哦！
2. 非父子组件，通过vuex ； 引入vuex会导致代码性价比比较低，项目本身没有使用vuex的必要；如需引用，储存变量最好贯穿整个项目，否则没有必要！
3. session、localStorage 浏览器存储

provide和inject

相比于props和emit，provide和inject为跨组件通信提供了更好的方式。

1. provide就相当于加强版父组件prop
2. inject就相当于加强版子组件的props 

provide和inject不管组件嵌套多少层都可以直接拿到

1. 在父组件中使用provide（函数）写下数据
2. 在子组件通过inject（数组）拿到需要的父组件中的数据
3. 使用数据时候，等同于data里的数据使用方法

使用

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