摘要：組件是 vue.js最強大的功能之一，這五個組件間傳值場景你了解嗎？
本文分享自華為雲社區《你了解Vue組件間傳值五大場景嗎？》，作者：北極光之夜。 。
父組件向子組件傳值：
比如有一個 Father.vue 的父組件要傳值給 Children.vue 的子組件，完成共需四步：
父組件 Father.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>父組件區域</h2>
<hr />
<!-- 第二步：在引用的子組件標簽里定義 :num="num" , num就是要傳遞的變量-->
<Children :num="num"></Children>
</div>
</template>
<script>
// 引入子組件
import Children from "./Children.vue";
export default {
data() {
return {
// 第一步：我們將要把變量 num 的值傳給子組件Children
num: 666,
};
},
components: {
Children,
},
};
</script>
子組件 Children.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>子組件區域</h2>
<!-- 第四步：在子組件顯示父組件傳過來的值 -->
<i>父組件傳遞過了的值:{{ num }}</i>
</div>
</template>
<script>
export default {
//第三步： 子組件可以通過定義的props就可以接收來自父組件的變量值 num
props: ["num"],
data() {
return {};
},
};
</script>
運行效果：
子組件向父組件傳值：
比如有一個 Children.vue 的子組件要傳值給 Father.vue 的父組件，完成共需六步：
子組件 Children.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>子組件區域</h2>
<!-- 第二步：得定義一個向父組件傳值的方法，比如定義一個按鈕，
綁定一個點擊事件，觸發giveFather方法 -->
<button @click="giveFather">giveFather</button>
</div>
</template>
<script>
export default {
data() {
return {
// 第一步：我們將要把變量 word 的值傳給父組件
word: "北極光之夜。",
};
},
methods: {
// 第三：定義子組件向父組件傳值的事件方法
giveFather() {
// 第四步：可以通過$emit傳值給父組件,第一個參數為傳值的方法，第二個參數為要傳遞的值
this.$emit("giveFather", this.word);
},
},
};
</script>
父組件 Father.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>父組件區域</h2>
<hr />
<!-- 第五步：要在引用的子組件標簽里定義一個自定義事件，
該自定義事件要寫為子組件$emit的第一個參數一樣,
然后雙引號里的方法可以自定義，我這就為getSon -->
<Children @giveFather="getSon"></Children>
</div>
</template>
<script>
// 引入子組件
import Children from "./Children.vue";
export default {
data() {
return {};
},
components: {
Children,
},
methods: {
//第六步：定義獲取子組件值的方法，該方法的參數就為子組件傳遞過來的值
getSon(temp) {
// 控制台輸出看看能不能獲取
console.log(temp);
},
},
};
</script>
運行效果：
兄弟組件間傳值：
比如有一個 Father.vue 的父組件，它有一個Children.vue 的子組件和一個Son.vue 的子組件，那么，Children.vue 和 Son.vue 就是兄弟關系，現在 Children.vue 要向兄弟 Son.vue 傳值：
首先在vue原型上定義一個新的實例，main.js文件內容，注意里面的操作步驟：
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 第一步，在vue原型上定義一個自己的方法，一般叫$bus，為vue實例 Vue.prototype.$bus = new Vue(); new Vue({ render: h => h(App), }).$mount('#app')
Children.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>Children子組件區域</h2>
<!-- 第三步：定義一個向兄弟組件傳值的方法，比如定義一個按鈕，
綁定一個點擊事件，觸發giveSon方法 -->
<button @click="giveSon">giveSon</button>
</div>
</template>
<script>
export default {
data() {
return {
// 第二步：我們將要把變量 word 的值傳給兄弟組件
word: "北極光之夜。",
};
},
methods: {
// 第四：定義子組件向兄弟組件傳值的事件方法
giveSon() {
// 第五步：可以通過自定義的$bus的$emit傳值給兄弟組件,
//第一個參數為傳值的方法，第二個參數為要傳遞的值
this.$bus.$emit("giveSon", this.word);
},
},
};
</script>
Son.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>Son子組件區域</h2>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {
//第六步：通過$on方法進行獲取兄弟傳遞過來的值。
//第一個參數為兄弟組件傳值的方法，第二個參數是自定義的方法
this.$bus.$on("giveSon", this.getSon);
},
methods: {
//第七步，自定義的方法,參數就是兄弟傳過來的值
getSon(temp) {
//輸出看看
console.log(temp);
},
},
};
</script>
運行效果：
使用Vuex狀態機傳值：
Vuex是實現組件全局狀態(數據)管理的一種機制，可以很方便的實現組件之間數據的共享。
關於Vuex的詳細使用，可以看這篇文章，指路👉：https://auroras.blog.csdn.net/article/details/117536679
給后代組件傳值，provide和inject：
比如有一個 Father.vue 的父組件，它有一個Children.vue 的子組件，那么這個Children.vue 的子組件是他的后代。而若Children.vue 也有一個子組件 grandSon.vue，那么grandSon.vue 就相當於 Father.vue的孫子組件，同樣，grandSon.vue也會是Father.vue的后代。以此類推，它的孫子，孫子的孫子等等都是它后代。現在我們實現Father.vue 給它的后代grandSon.vue孫子組件傳值：
父組件 Father.vue 內容，注意里面的操作步驟：
<template>
<div>
<h2>父組件區域</h2>
<hr />
<Children></Children>
</div>
</template>
<script>
// 引入子組件
import Children from "./Children.vue";
export default {
data() {
return {
// 第一步：定義一個變量，我們將要把變量 num 的值傳給后代組件grandSon.vue
num: "北極光之夜",
};
},
// 第二步，定義一個provide函數
provide() {
//第三步，如下定義，給后代接收
//giveAfter名稱為自己定義，任意起，this固定寫法
return {
giveAfter: this,
};
},
components: {
Children,
},
};
</script>
子組件Children.vue 內容，沒什么，引入子組件就行：
<template>
<div>
<h2>
Children子組件區域
<hr />
<Grand-son></Grand-son>
</h2>
</div>
</template>
<script>
// 引入子組件
import GrandSon from "./GrandSon.vue";
export default {
data() {
return {};
},
components: {
GrandSon,
},
};
</script>
孫子組件GrandSon.vue 內容，注意里面的操作步驟：
<template> <div> GrandSon孫子組件區域 <!-- 第六步：展示數據 --> <i> {{ num }}</i> </div> </template> <script> export default { //第四步：定義inject,里面寫祖先組件自定義的名稱 inject: ["giveAfter"], data() { return { // 第五步：取得祖先組件傳的值，this.giveAfter.要傳遞值的變量名 //賦值給num num: this.giveAfter.num, }; }, }; </script>
看運行效果，成功獲取：
