Vue这玩意儿真是好用，让我成功地完成了爸爸与儿子间的数据传输任务！把要传的数值交给提供，注入那里就能收到想要的东西了！无论你给什么，哪怕是计算出的数字，放那儿就能变成数据，多么神奇！原来数据交换可以如此简单！
接收数据的后代组件
给大家分享个小技巧：在用新的Vue组件替换旧的老祖宗组件时，不要只顾着把数据传过去，还得想想怎么从新组件得到点什么。这时候inject这个功能就能派上大用场了。在behavior.vue里面，把inject设为存放老祖宗组件传递过来的数据的地方(数组或对象)。新组件里面的inject就是个属性名，和老祖宗组件的provide是一一相对应的！这样的话，以后查看新组件的数据时也不用愁找不到老祖宗组件发来的那部分。
父子组件之间传递数据
Vue.component('ancestor-component', {
provide: {
name: 'Alice',
age: 20,
address: {
city: 'Beijing',
district: 'Haidian'
},
calcSalary: function () {
return 10000
}
},
// ...
})
别忘了，跟老爸和孩子交流时要巧妙地搭桥牵线哦而不是硬碰硬！想让更多人了解？那个叫Vuex和Event Bus的小帮手可是个好东西！然后，用Vue组建模块时，得看清它们之间的联系，再决定怎么联系人。
属性名命名问题
记得，给和打可千万别弄错了！错了的话真是浪费时间什么也没得到；如果搞不清楚，那真的是找不着方向，最后可能还稀里糊涂的。所以我们还是小心点好，走在相同的道路上，否则往回传过去，肯定会手忙脚乱的，心焦火燎的，那多不好。
Vue.component('descendant-component', {
inject: {
name: 'name',
age: 'age',
address: 'address',
calcSalary: 'calcSalary'
},
mounted: function () {
console.log(this.name) // Alice
console.log(this.age) // 20
console.log(this.address.city) // Beijing
console.log(this.address.district) // Haidian
console.log(this.calcSalary()) // 10000
}
})
数据类型问题
接着聊聊这些奇特的数据类型！给孩子们传消息不仅是单纯的数字，还需要穿个””小马甲嘿嘿。这是为啥？因为无论你发送啥，它都会自动生成一个备用的副本，即便你修改了内容，父母那边也不会有变化哟。所以，穿上小马甲之后，别人就能看到你更新的信息！
灵活应用 provide 和 inject
学着用Vue里的provide跟inject函数来搞定上下层的数据传输，这在大型项目中可是超级实用哦!学会这套方法，你的代码会简单明了得让人惊叹，同时也会让你的工作效率飙升!
结语
学点Vue里的提供和注入功能，解决我们家爸妈和我的数据传递问题！用好了这招，项目变得整洁好多，使用也方便多了，码字速度都提高了。处理Vue项目中的数据混乱时，这一技巧可是个法宝。
评论0