vue 子组件给父组件传值_详细教学vue子组件和祖父组件的通讯

导语：
想象大家在开发的过程中总会遇到子组件和祖父组件的通讯问题，而且不知道怎么解决，这篇文章教会大家。

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