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

本文的目录

• 1，子组件向祖父组件传值
• 2，祖父组件向子组件传值

1，子组件向祖父组件传值

son是father的子组件，father是grandfather的子组件。

1，son组件

<son @click="clickson"/>
<script > export default {  methods: {  clickson (args) {  this.$emit('father', args) //args要传的参数 } } } </script>

2，father组件

<father >
	<son @father=“clickfather” />
<father>
<script > export default {  methods: {  clickfather (args) {  this.$emit('grandfather', args) //args要传的参数 } } } </script>

3，grandfather组件

<grandfather >
	<father @grandfather=“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>

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！