vue父与子组件,子与子组件间的方法调用和通信
子与子之间通信的前提是有一个共同的父亲,首先,在vue中,$+name是vue系统定义的实例属性或方法,vue的api上面写的有链接实例属性。$parent指的是当前组件的父实例。$refs指的是一个对象,持有注册过 ref特性(ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。链接ref注册)的所有 DOM 元素和组件实例。使用$emit...
·
子与子之间通信的前提是有一个共同的父亲,
首先,在vue中,$+name是vue系统定义的实例属性或方法,vue的api上面写的有链接实例属性。
$parent指的是当前组件的父实例。$refs指的是一个对象,持有注册过 ref特性 (ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。链接ref注册)的所有 DOM 元素和组件实例。
使用$emit子传父和props父传子比较繁琐不建议使用。
能相互调用方法就能相互通信,改变各自组件 的属性值
方法里如果需要参数还可以传递参数
子组件对父组件的方法的调用:this.$parent.fatherMethod(....)。还能隔辈引用,this.$parent.$parent,对爷爷辈的引用。
父组件对子组件方法的调用:this.$refs.childRef.childMethod(....)。前提要在标签上注册ref特性,如下demo
子组件1对子组件2的方法调用:this.$parent.$refs.child2Ref.child2Method(...),同样可推隔辈使用的方法。
下面有程序小样,可供参考
父组件的code
<template>
<div id="parent">
<child1Label ref="child1Ref"><!--这里一定要通过ref注册,父组件才能调用子组件方法-->
</child1Label>
<child2Label ref="child2Ref">
</child2Label>
<button @click="fatherMethod2">调c2方法</button>
</div>
</template>
<script>
import child1 from "@/components/child1"
import child2 from "@/components/child2"
export default{
data(){
return{
}
},
methods:{
fatherMethod1:function(){
console.log('这是父组件的方法');
},//子组件能调用父组件方法,就能通过方法修改父组件属性字段的值,也就相当于实现了通信功能
fatherMethod2:function(){
this.$refs.child2Ref.child2Method();
}
},
components:{
child1Label:child1,
child2Label:child2,
},
}
</script>
<style scoped>
</style>
子组件的code
<template>
<div id="child1">
<button @click="child1Method">子组件1</button>
</div>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
child1Method:function(){
console.log('这里使子组件1的方法');
this.$parent.fatherMethod1();//调用父组件的方法
this.$parent.$refs.child2Ref.child2Method();//调用子组件2的方法
}
},
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)