導語：
想象大家在開發的程序中總會遇到子組件和祖父組件的通訊問題，而且不知道怎么解決，這篇文章教會大家，
本文的目錄
- 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全堆疊工程師，我們下期再見！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/140397.html
標籤：其他
上一篇：技術咨詢