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

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

一、組件目錄結構

• 父組件：app.vue
• 子組件：page1.vue
• 子組件：page2.vue

父組件 app.vue

<template>
  <div id="app">
    <p>請輸入單價: <input type="text" v-model="price"></p>
    <page1 :price="price" @downPrice="downPrice"></page1>
    <page2></page2>
  </div>
</template>

<script>
import Page1 from "./components/page1";
import Page2 from "./components/page2";
export default {
  name: "App",
  data() {
    return {
      price: ""
    };
  },
  components: {
    Page1,
    Page2
  },
  methods: {
    downPrice() {
      this.price = (this.price - 1).toString();
    }
  }
};
</script>

子組件 page1.vue

<template>
    <div>
        <p><span>單價：</span><span>{{price}}</span> <button @click="downPrice">降價1元</button></p>
        <p>數量: {{count}} </p>
        
    </div>
</template>
<script>
import bus from  '../eventBus.js'
export default {
    props:{
        price:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            count:10
        }
    },
    methods:{
        downPrice(){
            this.$emit('downPrice')
        }
    },
    watch:{
       price(newPrice){
          bus.$emit('priceChange',newPrice,this.count) 
       } 
    }
}
</script>

子組件 page2.vue

<template>
    <div>
        <p>
            <span>總金額：{{totalMoney}}元 </span>剩餘金額：
            <span>{{balance}}元</span>
        </p>
    </div>
</template>
<script>
import bus from "../eventBus.js";
export default {
  data() {
    return {
      balance: 1000,
      totalMoney: 1000
    };
  },
  mounted() {
    bus.$on("priceChange", (price, count) => {
      this.balance = this.totalMoney - price * count;
    });
  }
};
</script>

 

二、通信過程介紹

 

1.父組件向子組件傳值

1.1在父組件中引入需要通信的子組件

import Page1 from "./components/page1";

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

components: {
    Page1
  }

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

<page1></page1>

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

<page1 :price="price"></page1>

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

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

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

1.6 在子組件中使用該值

<p><span>單價：</span><span>{{price}}</span></p>

 

2.子組件向父組件中傳值

2.1 在page1.vue中，通過觸發子組件的方法(這裏是自定義的downPrice方法),

 <p><span>單價：</span><span>{{price}}</span> <button @click="downPrice">降價1元</button></p>

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

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

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

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

<page1 :price="price" @downPrice="downPrice"></page1>

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

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

 

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

方法一：

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

<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>

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;
    });

參考文章：https://segmentfault.com/a/1190000011882494

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