1.vue父组件给子组件传值的方法
<heador :userName=”username”></heador>
子组件中通过props接收传值
props:{
username:{
type:String,
default:""
}
}
2.vue父组件调用子组件的方法
<heador ref=”header”></heador>
this.$refs.header.子组件的方法
3.子组件传值给父组件
一般通过点击事件
this.$emit(“getName”,this.msg)
在这里注册一个事件,把值通过事件带过去。
然后在父组件中通过
<asidor @getName=”getNamefromchild”>
</asidor>
在methods中可以通过
getNamefromchild(data){
data就是传过来的值
}
4.子组件调用父组件的方法
在子组件中
<el-button type=”primary” @click=”diaoyongparent”></el-button>
diaoyongparent(){
this.$emit(“diaoyongParentfunc”)
这里可以带参数
}
然后在父组件中
<asidor @diaoyongParentfunc=”diaoyongbychild”></asidor>
diaoyongbychild(){
alert(“调用父组件的方法了,如果有参数也可以哦”)
}
5.对于非父子组件的传值
首先在main.js里面定义Vue对象的时候在data属性里面创建一个变量,并赋值为一个vue对象,这个变量在整个应用中都可以直接访问,他可以充当EventHub事件中心
new Vue({
el:”#app”,
router,
store,
components:{App},
data:{
Hub:new Vue()
}
})
然后在第一个组件里面
gotoside(){
this.$root.Hub.$emit(“oneEvent”,this.msg)
}
然后在第二个组件里面
created(){
this.$root.Hub.$on(“oneEvent”,function(msg){
alert(msg)
})
}