vue組件間通信、數據傳遞（父子組件，同級組件）

tunny 發布于2019-08-01 17:58 / 3047人閱讀

總結一下對vue組件通信的理解和使用。

一、組件目錄結構

父組件：app.vue

子組件：page1.vue

子組件：page2.vue

父組件 app.vue

子組件 page1.vue

子組件 page2.vue

二、通信過程介紹 1.父組件向子組件傳值 1.1在父組件中引入需要通信的子組件

import Page1 from "./components/page1";

1.2 在父組件的components中注冊該子組件

components: {
    Page1
  }

1.3 在父組件的template中使用子組件

1.4 將需要傳遞給子組件的值通過v-bind(如果傳遞的是固定值，則不需要v-bind，直接屬性名，屬性值傳遞即可)。



//  此處的price則是傳遞給子組件的值

1.5 在對應的子組件中，通過props屬性接收傳遞過來的值

props:{
        price:{
            type:String,
            default:""
        }
  }

1.6 在子組件中使用該值

單價：{{price}}

2.子組件向父組件中傳值 2.1 在page1.vue中，通過觸發子組件的方法(這里是自定義的downPrice方法),

 單價：{{price}}

2.2 在子組件的methods的downPrice中，通過this.$emit(),將事件和參數傳遞給父組件

downPrice(count){
            this.$emit("downPrice",count)
  }

// downPrice 是傳遞給父組件的事件，父組件觸發并相應這個方法
// count 傳遞給父組件的參數，在父組件中，可以對和這個參數進行相應操作

2.3 在父組件中接受子組件傳遞的事件downPrice和數據

2.4 父組件對接收到的事件和數據做出響應

downPrice(count) {
      this.price = (this.price - 1).toString();
      // this.price = (this.price - count).toString();
    }

3、父組件調用子組件方法

方法一：

3.1 在使用子組件時，給子組件加一個ref引用

3.2 父組件通過this.$refs即可找到該子組件，也可以操作子組件的方法

this.$refs.page1.子組件方法

打印出獲取到的子組件信息：

方法二：

3.3 通過$children,可以獲取到所有子組件的集合

this.$children[0].某個方法

4、子組件調用父組件方法 4.1 通過 $parent可以找到父組件，進而調用其方法

this.$parent.父組件方法

打印出的父組件信息

5、平級組件通信

同級組件不能直接傳值，需要一個中間橋梁，可以先將數據傳遞給公共的父組件，然后父組件再將數據傳遞給需要的子組件。

5.1 定義一個公共文件 eventBus.js

代碼很簡單(就2句)，只是創建一個空的vue實例

import Vue from "vue"
export default new Vue()

5.2 在需要通信的同級組件中分別引入eventBus.js文件

import bus from  "../eventBus.js"

5.3 在page1.vue中，通過$emit將事件和參數傳遞給page2.vue

price(newPrice){
          bus.$emit("priceChange",newPrice,this.count) 
}

5.4 在page2.vue 中，通過$on接收接收參數和相應事件

bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });

一般大型的項目，推薦使用Vuex來管理組件之間的通信

如果對道友你有幫助，請收藏和點贊，如果覺得有問題，歡迎留言指出，demo查看

GPU云服務器云服務器 vue父子組件通訊父子組件通信父子組件父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51495.html

vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 評論0 收藏0
Vue 組件間通信方式

摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質還是單向數據流。跟一樣，組件間最基本的數據流是通過向子組件傳遞數據。但是在卻很少使用，因為組件可以自定義事件，即后面的組件間通信方式其實就是訂閱發布模式。例子是在 jsrun.net 平臺編寫，不支持移動端平臺，所以本文建議在 PC 端進行閱讀。 Vue 是數據驅動的視圖框架，那么組件間的數據通信是必然的事情，那么組件間如何進行數...

hss01248 2019-08-26 13:54 評論0 收藏0
vue父子組件間通信

摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。父子通信目前有四種方式： 1.父組件傳遞數據給子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數據:方式1：props: [childMs...

617035918 2019-08-23 11:51 評論0 收藏0
vue組件通信全面總結

摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創建高級別的組件時非常有用。寫在前面組件間的通信是是實際開發中非常常用的一環，如何使用對項目整體設計、開發、規范都有很實際的的作用，我在項目開發中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景文章對相關場景預覽父->子組件間的數據傳遞子->父組件間的數據傳遞兄弟...

余學文 2019-08-23 12:16 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0