父組件向子組件傳值：

比如有一個 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 的值傳給子組件Childrennum: 666,};},components: {Children,}, }; </script>

子組件 Children.vue 內容，注意里面的操作步驟：

<template><div><h2>子組件區域</h2><!-- 第四步：在子組件顯示父組件傳過來的值 --><i>父組件傳遞過了的值:{{ num }}</i></div> </template> <script> export default {//第三步： 子組件可以通過定義的props就可以接收來自父組件的變量值 numprops: ["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

運行效果

總結就是，在vue原型上定義一個新的實例， 然后采用 emit 和emit和 on 這兩個方法進行獲取傳遞過來的值。

使用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的后代。以此類推，它的孫子，孫子的孫子等等都是它后代?，F在我們實現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.vuenum: "北極光之夜",};},// 第二步，定義一個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.要傳遞值的變量名//賦值給numnum: this.giveAfter.num,};}, }; </script>

運行效果

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。