vue2.0/3.0中provide和inject的用法示例 vue2.0

1、provide/inject有什么用？
2、provide/inject使用方式

具体用法：
vue3.0用法

总结

1、provide/inject有什么用？
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据，子组件通过props属性接收，一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。
vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据
【vue2.0/3.0中provide和inject的用法示例】
2、provide/inject使用方式
provide：是一个对象 / 返回对象的函数。
里面是属性和属性值。
注意：子孙层的provide会掩盖祖父层provide中相同key的属性值
inject：一个字符串数组，或者是一个对象。
属性值可以是一个对象，包含from和default默认值，from是在可用的注入内容中搜索用的 key (字符串或 Symbol)，意思就是祖父多层provide提供了很多数据，from属性指定取哪一个key;
default指定默认值。

具体用法：
父组件

子孙

vue3.0用法
父组件