vue Provide/inject传值方法
简介:
vue中父子页面可以使用props，emit进行传值，但在组件关系较为复杂时，这样的方法并不实用。
还有一种主要为高阶插件/组件库提供的用例办法，即provide/inject，这对选项需要一起使用。
使用的方法很简单，祖先节点使用provide注入数据，子级节点使用inject注入数据。并在上下游关系存在的时间内始终生效。
缺点：
在项目中，一般我们追求清晰的数据流向和层级关系，而这一对选项支持任意层级的访问，不知道哪一层级声明了provide，哪一层级使用了inject，造成组件间关系混乱。
除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。
使用办法
- provide 提供变量：
Object | () => Object - inject 注入变量：
Array| { [key: string]: string | Symbol | Object }
provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。
inject 选项可以是
- 一个字符串数组
- 一个对象，
key为本地绑定名，value为：- 在可用的注入内容中搜索用的
key，或 - 一个对象，其
from属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value
- 在可用的注入内容中搜索用的
提示：
provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。
示例：
父组件中{{ title }}
在子组件中，我们故意不使用任何父组件的信息
{{ title }}
在孙组件中，使用inject来注入
message：{{ message }}
结果孙组件页面显示：message: provided by father