您的位置:首页 > 产品设计 > UI/UE

vue 父子组件间的通迅

2017-12-06 10:33 417 查看
父组件调用子组件的方法
在父组件里  先给子组件加上一个ref ,起个名字,
<serviceRateAction ref="serviceRate" ></serviceRateAction>
然后根据子组件的名字 serviceRate  直接可以用 this.$refs.serviceRate.parentClick();   可直接调起子组件的 parentClick  方法
this.$refs.serviceRate.parentClick();
子组件调用父组件的方法

在父组件里  先给子组件传递要调用的方法,用 v-on:abc="goback" 来传递,    abc 是你自己起的名字,子组件里要用有,传的是 goback 方法,可写多个
<serviceRateAction ref="serviceRate" v-on:abc="goback"></serviceRateAction>然后在子组件里  this.$emit('abc');  可直接高调用父组件的goback 方法
this.$emit('abc');

父组件给子组件传递数据1、直接传:
父中:
<serviceRateAction ref="serviceRate" :id="parend.id" :name="parent.name" :obj="obj"></serviceRateAction>parent.id、name 是父组件的一个数据,然后子组件接收
子中:
用  props  来接收,可以监听 id 的变化来做相应的操作
mounted :function(){
this.$nextTick(function () {

})
},
watch : {
'id' : 'DataChange'
},
props : ['id','name'],传递对象数据
<serviceRateAction :obj="obj"></serviceRateAction>子中:seller 可以直接在模板上用 {{seller.name}} props : {
seller : {
type : Object //设置数据类型
}
}

2、可以用vuex来实现
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: