导语:
想象大家在开发的过程中总会遇到子组件和祖父组件的通讯问题,而且不知道怎么解决,这篇文章教会大家。
1,子组件向祖父组件传值
son是father的子组件,father是grandfather的子组件。
1,son组件
<son @click="clickson"/>
<script >
export default {
methods: {
clickson (args) {
this.$emit('clickfather', args) //args要传的参数
}
}
}
</script>
2,father组件
<father >
<son @clickson=“clickfather” />
<father>
<script >
export default {
methods: {
clickfather (args) {
this.$emit('clickgrandfather', args) //args要传的参数
}
}
}
</script>
3,grandfather组件
<grandfather >
<father @clickfather=“clickgrandfather”/>
<grandfather>
<script >
export default {
methods: {
clickgrandfather () {
console.log(args)//args要传的参数
}
}
}
</script>
这样就可以son组件执行grandfather组件的函数。
2,祖父组件向子组件传值
1,grandfather组件
<template>
<div class="grandfather">
<father :msg1="msg1" />
</div>
</template>
<script>f
import father from './father'
export default {
components: {father},
data () {
return {
msg1: '小米粥'
}
}
}
</script>
2,father组件
<template>
<div class="father">
<son :msg1="msg1" />
</div>
</template>s
<script>
import son from './son'
export default {
props: ['msg1'],
components: {son},
}
</script>
3,son组件
<template>
<div class="son">
<p>{{msg1}}</p>
</div>
</template>
<script>
export default {
props: ['msg1']
}
</script>
————————————————
版权声明:本文为CSDN博主「git小米粥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:
详细教学vue子组件和祖父组件的通讯_gitchatxiaomi的博客-CSDN博客blog.csdn.net