export default用法vue-ag凯发k8国际
前言：
之前在 vue 中进行组件通信一般都会使用 props，开始使用 provide/inject 是非常偶然的一次尝试。
当时在开发中需要实现祖孙组件，甚至祖祖祖祖孙组件之间的通信，在这种多层级场景下，props 就显得太过累赘了，由于是进行设计器（插件）开发，为了提高插件的可复用性，减少不必要的包依赖，倾向于在不引入 vuex 的情况下解决这个问题，那么就应该看看 vue 本身，是否具有这种能力，就在这个时候，我发现了 provide/inject。
官方定义
我们先来看看 vue 官方的定义是什么：
provide/inject 是 vue 在 2.2.0 版本新增的 api，ag凯发k8国际官网这段定义看起来好像有点难理解，通俗的讲，就是 provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。
举个
// 父级组件提供 'foo'在这里我们可以发现孙组件越过子组件接收了父组件注入的数据，我们可以理解为爷爷越过爸爸偷偷给孙子买了冰激凌，这是一组最简单的用法，当层级继续增加时，仍可通过这种方式由父组件直接跨域多个层级向后代组件注入数据。
有一点需要特别注意的是，实际上我们可以将当前组件inject获取的数据直接赋值给它本身的data或props，不过ag凯发k8国际官网提示我们，这是在vue2.2.1版本才实现的功能，在这之前，必须先进行props和data数据的初始化。
响应更新
在尝试中我们发现，由于vue的单向流关系，实际上如果在parent中改变了初始传入的foo的值以后，grandson并不会得到改变后的值，也就是在这个时候，父孙组件的数据出现了不一致的情况，我们肯定是希望拿到的数据是一致的，怎么来解决这个问题呢，ag凯发k8国际官网还有一句提示为我们提供了解释。
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。 也就是指，我们需要人为的将这组数据关系变成可响应的，哦，我们之前的foo是一个字符串，基本数据类型是不具有响应特性的，那么，我们可能需要传递一个对象。再举个
// 改造一下父级组件提供 'foo'在这个栗子中，改造了一下父组件提供的数据，测试发现，foo变成了一组可响应的数据。经过尝试我发现在这种情况下如果在孙组件改变inject中foo的值，也会响应的更新到父组件中，当然为了保护单向数据流机制，最佳实践还是不要在子组件里更改inject（虽然 sync 也破坏了单向数据流）。
默认值设置
在 2.5.0 的注入可以通过设置默认值使其变成可选项：在2.5.0 版本之后的版本中可以为inject提供默认值了，如果它需要从一个不同名字的 property 注入，则使用 from 来表示其源 property，与 prop 的默认值类似，需要对非原始值使用一个工厂方法。
呱唧呱唧，那基本用法我们就讲到这里了，归根结底，既然provide/inject 这么方便，为什么 vue 官方还要推荐我们使用 vuex进行数据管理呢？
明显的缺点
provide/inject 的缺点还是非常明显的：
- 当多个后代组件同时依赖同一个父组件提供数据时，只要任一组件对数据进行了修改，所有依赖的组件都会受到影响，实际上是增加了耦合度。
- 任意层级访问使数据追踪变的比较困难，你并不能准确的定位到是哪一个层级对数据进行了改变，当数据出现问题时，尤其是多人协作时，可能会大大增加问题定位的损耗。
值得肯定的优点
万事万物都有把双刃剑，有缺点自然也有优点，在进行组件库或高级插件开发时，provide/inject 仍然是一个不错的选择。
留坑待补（应当不会鸽）
- 从vue生命周期源码来看provide/inject的执行过程
- 插件/组件库应用实例（同样的功能实现与vuex进行对比）
最后
其实之前的笔记都是写给自己看的，这还是真正意义上的第一篇热乎乎的博客，emmm感觉还有些地方没有讲的很明白，也还留坑了一些内容后续会慢慢完善，输出真是不易的过程，不过会继续努力学习提高哒，有问题欢迎指出，会及时更正，奥里给！
最后的最后
给我们的小组卖个安利，组内都是可爱的程序媛小姐姐哦，欢迎热爱前端的小姐妹们加入ag凯发k8国际，一起学习，共同进步【有意请留言或私信，社畜搬砖不及时，但看到会立刻回复】总结
以上是ag凯发k8国际为你收集整理的export default用法vue_vue组件通信—provide/inject的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： android蓝牙查看电池容量_双麦降噪
- 下一篇：