关于vue里父子组件与非父子组件间的传值
vue里父子组件与非父子组件间的传值还是很重要的,刚开始也是看着别人写的博客学习的,下面是自己学后的总结
1,父组件向子组件传值,通props
//父组件
<template> <div> <title>这是父组件</title> <div>父组件里的内容区域</div>
<child :parentMsg>这是引用的子组件</child>
</div> </template>
data:{
parentMsg:"这是父组件里的值",
}
//子组件
<template> <div> <title>这是子组件</title> <div>子组件里的内容区域
<p>{{parentMsg}}</p>
</div>
</div> </template>
data:{
props:{
parentMsg:"",
default:"String",//要传类型
}
}
2.子组件向父组件传值--->$emit
//父组件
<template> <div> <title>这是父组件</title> <div>父组件里的内容区域{{fromChildMsg}}</div>
<child :fromChild='childMsg'>这是引用的子组件</child>
</div> </template>
data:{
fromChildMsg:"",
},
methods(){
childMsg(val){
//val就是子组件传来的值,
this.fromChildMsg=val;
}
}
//子组件
<template> <div> <title>这是子组件</title> <div @click="toParent">子组件里的内容区域</div>
</div> </template>
methods(){
toParent(){
this.$emit("fromChild","这里是要传给父组件的值");
}
}
3,非父子组件间的传值
非父子组件间的传值需有一个共同的实,可在main.js里导出一个vue实例,也可新那一个文件,在里面引入vue,创建一个vue实例,然后导出,然后要用到$on监听
下面说具体说下
先说在main.js里的写法
export var bus = new Vue();
然后在要用的组件里导入
import bus from '/main.js'
//将要传递的数据以名子a发送
bus.$emit("a","132456");
//以名字a来接收传来的值
bus.$on("a",function(val){
val就是传过来的值
});
//新建一个文件也这个一样,
// 在assets里 新建一个eventBus.js
在这个js里引入Vue,并创建实例
import vue from 'Vue'
export new Vue();
在要用的给组件里引入这个JS;
后面的操作和上面一样了
import eventBus form 'eventBus'
eventBus.$emit("a","234243");
eventBus.$on("a",function(val){
val就是传来的值
})