父組件向子組件傳值：

比如有一個(gè) Father.vue 的父組件要傳值給 Children.vue 的子組件，完成共需四步：

父組件 Father.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>父組件區(qū)域</h2><hr /><!-- 第二步：在引用的子組件標(biāo)簽里定義 :num="num" , num就是要傳遞的變量--><Children :num="num"></Children></div> </template><script> // 引入子組件 import Children from "./Children.vue"; export default {data() {return {// 第一步：我們將要把變量 num 的值傳給子組件Childrennum: 666,};},components: {Children,}, }; </script>

子組件 Children.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>子組件區(qū)域</h2><!-- 第四步：在子組件顯示父組件傳過(guò)來(lái)的值 --><i>父組件傳遞過(guò)了的值:{{ num }}</i></div> </template> <script> export default {//第三步： 子組件可以通過(guò)定義的props就可以接收來(lái)自父組件的變量值 numprops: ["num"],data() {return {};}, }; </script>

運(yùn)行效果

子組件向父組件傳值：

比如有一個(gè) Children.vue 的子組件要傳值給 Father.vue 的父組件，完成共需六步：

子組件 Children.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>子組件區(qū)域</h2><!-- 第二步：得定義一個(gè)向父組件傳值的方法，比如定義一個(gè)按鈕，綁定一個(gè)點(diǎn)擊事件，觸發(fā)giveFather方法 --><button @click="giveFather">giveFather</button></div> </template> <script> export default {data() {return {// 第一步：我們將要把變量 word 的值傳給父組件word: "北極光之夜。",};},methods: {// 第三：定義子組件向父組件傳值的事件方法giveFather() {// 第四步：可以通過(guò)$emit傳值給父組件,第一個(gè)參數(shù)為傳值的方法，第二個(gè)參數(shù)為要傳遞的值this.$emit("giveFather", this.word);},}, }; </script>

父組件 Father.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>父組件區(qū)域</h2><hr /><!-- 第五步：要在引用的子組件標(biāo)簽里定義一個(gè)自定義事件，該自定義事件要寫(xiě)為子組件$emit的第一個(gè)參數(shù)一樣,然后雙引號(hào)里的方法可以自定義，我這就為getSon --><Children @giveFather="getSon"></Children></div> </template><script> // 引入子組件 import Children from "./Children.vue";export default {data() {return {};},components: {Children,},methods: {//第六步：定義獲取子組件值的方法，該方法的參數(shù)就為子組件傳遞過(guò)來(lái)的值getSon(temp) {// 控制臺(tái)輸出看看能不能獲取console.log(temp);},}, }; </script>

運(yùn)行效果

兄弟組件間傳值：

比如有一個(gè) Father.vue 的父組件，它有一個(gè)Children.vue 的子組件和一個(gè)Son.vue 的子組件，那么，Children.vue 和 Son.vue 就是兄弟關(guān)系，現(xiàn)在 Children.vue 要向兄弟 Son.vue 傳值：

首先在vue原型上定義一個(gè)新的實(shí)例，main.js文件內(nèi)容，注意里面的操作步驟：

import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = false// 第一步，在vue原型上定義一個(gè)自己的方法，一般叫$bus，為vue實(shí)例 Vue.prototype.$bus = new Vue();new Vue({render: h => h(App), }).$mount('#app')

Children.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>Children子組件區(qū)域</h2><!-- 第三步：定義一個(gè)向兄弟組件傳值的方法，比如定義一個(gè)按鈕，綁定一個(gè)點(diǎn)擊事件，觸發(fā)giveSon方法 --><button @click="giveSon">giveSon</button></div> </template> <script> export default {data() {return {// 第二步：我們將要把變量 word 的值傳給兄弟組件word: "北極光之夜。",};},methods: {// 第四：定義子組件向兄弟組件傳值的事件方法giveSon() {// 第五步：可以通過(guò)自定義的$bus的$emit傳值給兄弟組件,//第一個(gè)參數(shù)為傳值的方法，第二個(gè)參數(shù)為要傳遞的值this.$bus.$emit("giveSon", this.word);},}, }; </script>

Son.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>Son子組件區(qū)域</h2></div> </template> <script> export default {data() {return {};},created() {//第六步：通過(guò)$on方法進(jìn)行獲取兄弟傳遞過(guò)來(lái)的值。//第一個(gè)參數(shù)為兄弟組件傳值的方法，第二個(gè)參數(shù)是自定義的方法this.$bus.$on("giveSon", this.getSon);},methods: {//第七步，自定義的方法,參數(shù)就是兄弟傳過(guò)來(lái)的值getSon(temp) {//輸出看看console.log(temp);},}, }; </script

運(yùn)行效果

總結(jié)就是，在vue原型上定義一個(gè)新的實(shí)例， 然后采用 emit 和emit和 on 這兩個(gè)方法進(jìn)行獲取傳遞過(guò)來(lái)的值。

使用Vuex狀態(tài)機(jī)傳值：

Vuex是實(shí)現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機(jī)制，可以很方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享。

關(guān)于Vuex的詳細(xì)使用，可以看這篇文章，指路👉：https://auroras.blog.csdn.net/article/details/117536679

給后代組件傳值，provide和inject：

比如有一個(gè) Father.vue 的父組件，它有一個(gè)Children.vue 的子組件，那么這個(gè)Children.vue 的子組件是他的后代。而若Children.vue 也有一個(gè)子組件 grandSon.vue，那么grandSon.vue 就相當(dāng)于 Father.vue的孫子組件，同樣，grandSon.vue也會(huì)是Father.vue的后代。以此類推，它的孫子，孫子的孫子等等都是它后代。現(xiàn)在我們實(shí)現(xiàn)Father.vue 給它的后代grandSon.vue孫子組件傳值：

父組件 Father.vue 內(nèi)容，注意里面的操作步驟：

<template><div><h2>父組件區(qū)域</h2><hr /><Children></Children></div> </template><script> // 引入子組件 import Children from "./Children.vue"; export default {data() {return {// 第一步：定義一個(gè)變量，我們將要把變量 num 的值傳給后代組件grandSon.vuenum: "北極光之夜",};},// 第二步，定義一個(gè)provide函數(shù)provide() {//第三步，如下定義，給后代接收//giveAfter名稱為自己定義，任意起，this固定寫(xiě)法return {giveAfter: this,};},components: {Children,}, }; </script>

子組件Children.vue 內(nèi)容，沒(méi)什么，引入子組件就行：

<template><div><h2>Children子組件區(qū)域<hr /><Grand-son></Grand-son></h2></div> </template> <script> // 引入子組件 import GrandSon from "./GrandSon.vue"; export default {data() {return {};},components: {GrandSon,}, }; </script>

孫子組件GrandSon.vue 內(nèi)容，注意里面的操作步驟：

<template><div>GrandSon孫子組件區(qū)域<!-- 第六步：展示數(shù)據(jù) --><i> {{ num }}</i></div> </template> <script> export default {//第四步：定義inject,里面寫(xiě)祖先組件自定義的名稱inject: ["giveAfter"],data() {return {// 第五步：取得祖先組件傳的值，this.giveAfter.要傳遞值的變量名//賦值給numnum: this.giveAfter.num,};}, }; </script>

運(yùn)行效果

總結(jié)

以上是生活随笔為你收集整理的vue组件间的5种传值方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。