1.概念
成对出现:provide和inject是成对出现的
作用:用于父组件向子孙组件传递数据
使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
2.简单来说
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量
需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
父组件定义:
1 2 3 4 5 6 7 8 9 10 | <script> export default { // 父组件通过provide将自己的数据以对象形式传出去 provide(){ return { parentValue: "我是父组件的值啊" } } }; </script> |
子孙组件接受方式:
1 2 3 4 5 6 7 8 9 10 11 12 | <script> export default { // inject:["parentValue"], // 使用一个注入的值作为数据入口: inject:{ // 使用一个默认值使其变成可选项 parentValue: { // 健名 from: 'parentValue' , // 来源 default : 'parentValue' // 默认值 } } } </script> |
注意:provide并不是响应式的,当子组件inject的时候已经丢失了响应式功能
3.希望整个数据都是响应式的---provide提供一个函数。
函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。
1 2 3 4 5 6 7 8 9 10 11 12 | //父组件传值的定义个回调函数 provide() { return { getConfig: () => ({ liveConfig: this .liveConfig, roomConfig: this .roomConfig, currentTime: this .currentTime, loginUserInfo: this .loginUserInfo, isLiving: this .isLiving, }), }; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //子组件用计算属性取值,watch监听 computed: { actConfig() { return this .getConfig(); }, }, watch: { actConfig(val) { console.log( "组件监听到的值" , val); this .tabInfo = val.liveConfig.tabInfo; this .activityList = val.liveConfig.listTab; this .isLiving = val.isLiving; this .loginUserInfo = val.loginUserInfo; this .currentTime = val.currentTime; }, } |
这样做有一个好处,即无法直接修改computedProperty
的值,因为他是一个计算属性。这样就可以避免数据的混乱。
0条大神的评论