你们了解Vue的一些妙招吗？像是传输数据到子组件这个问题，不用太犯愁，教你个简单法子，用Vue的provide和inject就能做到！听着是不是觉得很神奇？赶紧跟我一起研究研究~
不用慌！Vue在更新到了2.2.0版本之后，给我们带来了两个神奇武器——provide和inject。从此以后，子组件进入父组件，爹妈儿就知道自己的孩子有没有来看自己，连传递props这个难题都被解决了~
// main.vue
// c1.vue
export default {
props: ['message'],
provide () {
return {
message: this.message
}
}
}
// c2.vue
{{ message }}
export default {
inject: ['message']
}
我跟你讲，其实Provider和Injection这俩家伙配对儿可使料到！他们能做全局依赖的注入，别说是老一代的组件了，就是那种吊链子似的深层组件也没问题。只要巧妙地运用这俩家伙，一切复杂关系都不成问题。简单来说，老一辈的组件只需要把关键数据塞进Provide属性里头，然后不论是子孙绕膝的子息成群，或者是婿媳满堂的孙媳妇们都可以通过Inject属性方便查找到所需数据。
hello world
你知道呗，这个provide和inject就像咱们平时生活里的快递，可以把东西寄给别人。但是，这数据不是每个地方都有只在父组件的后代组件里面才能找到，简单说就是家庭内部信息传递这样。
伙计们，我们主要靠两个操作来交流，就是提供和注入有想过改老爸那边定下的值？觉得孩子们这边也要变一变吗？但是别忘了，文档里分明写了最糟糕的情况，绑定这事儿不靠谱喔！
还想问？爸爸换给我 provide 了，那我咋办？放心好，没问题滴！理由吗，其实挺容易懂的，要是不重要，儿子根本不关心。举例子说，在 c1 组件里给 message 塞一个 props 当礼物，谁在意？就算你在 c1 的 mounted 钩子函数随意改动 message，我也毫不在意~
其实咱俩就是那种特爱凑热闹又不怕摊事儿的人儿，把那里设置成小人比较有意思！比如说，当C1花十秒搞定加载后，C2立马就能听到”我在C2登场咯”这段话！是不是太好玩？多亏C2的视角被那条信息给黏住了，C1那边一有动静，C2的眼睛立马转过去看！
// c1.vue
export default {
//...
mounted () {
setTimeout( () => {
this.message = 'Opps, it would not be rendered'
}, 1000)
}
}
别看调节人体内分泌的供给者（Providers）和注入工具（Injectors）表面看起来牛逼哄哄的，但实际上，用过一次就扔掉并不稀奇。这样一来，老爸组件就可以随心所欲地把血液输送给小的们了。可是当小项目试图跟随着老项目演化时，这俩哥们儿显然搞不定。眼瞅着这个难题搅黄了大局，Vuex挺身而出，迎难而上！
学了一下Vue里边那个分享和赋予功能，简单说就像是爹给娃娃传送点儿数据过去。虽然不是靠存数据实现的，不过有时候倒还真挺管用。不懂的或者有啥要说的话，随时找我哈～学到新知识的小伙伴记得点赞再转发！感谢各位小伙伴陪我一起学习！
// c1.vue
export default {
data () {
return {
message: 'hello world'
}
},
provide () {
messageData: this.$data
},
mounted () {
setTimeout(() => {
this.message = 'I can show in c2.'
}, 10000)
}
}
// c2.vue
{{ messageData.message }}
export default {
inject: ['messageData']
}
评论0