Vue(非)父子组件的传值以及方法调用

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)
})
}

    原文作者:薛小云
    原文地址: https://segmentfault.com/a/1190000017498261
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞