前言:
vue 中的父子组件传值:
vue 中的父子传值使用过:prop和$emit的组合。 来实现父子传值;
- 如果跨组件传值,还要使用prop的话,是不麻烦,在这里除了vuex,接下来,给大家说一下,除了vuex ,也可以实现跨组件传值。
provide
- 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject
- 一个字符串数组,或
- 一个对象点击这里
基本的使用方法:
// 祖先组件 提供foo
//第一种
export default {
name: "grandfather",
provide(){
return{
foo:'halo'
}
},
}
//第二种
export default {
name: "grandfather",
provide:{
foo:'halo~~~~'
},
}
//后代组件 注入foo
export default {
inject:['foo'],
}
- 上面两种的区别:
- 如果你只是传一个字符串,像上面的‘halo’,那么是没有区别的,后代都能读到。
如果你需要传一个对象(如下所示代码),那么第二种是传不了的,后代组件拿不到数据。所以建议只写第一种
//当你传递对象给后代时
provide(){
return{
test:this.msg
}
},
注意:一旦注入了某个数据,比如上面示例中的 foo,那这个组件中就不能再声明 foo 这个数据了,因为它已经被父级占有。
实现全局变量
- 全局变量?provide/inject不是只能从祖先传递给后代吗?没错,我们只要绑定到最最顶层的组件即可。
//app.vue
export default {
name: 'App',
provide(){
return{
app:this
}
},
data(){
return{
text:"it's hard to tell the night time from the day"
}
},
methods:{
say(){
console.log("Desperado, why don't you come to your senses?")
}
}
}
//其他所有子组件,需要全局变量的,只需要按需注入app即可
export default {
inject:['foo','app'],
mounted(){
console.log(this.app.text);//获取app中的变量
this.app.say();//可以执行app中的方法,变身为全局方法!
}
}