導語：
想象大家在開發的過程中總會遇到子元件和祖父元件的通訊問題，而且不知道怎麼解決，這篇文章教會大家。

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>

補充：

微信搜尋【web小館】，回覆全棧部落格專案，即可獲取專案原始碼和後續的實戰文章教學。每天用最簡單樸實的語言，潛移默化的提升你的計算機基礎知識和前端技術。小米粥，一個專注的web全棧工程師，我們下期再見！