基于現(xiàn)在都是模塊化開發(fā)，vue開發(fā)過程中組件之間傳值是必不可少的，常用的vue的組件傳值分為三種方式：父傳子、子傳父、非父子組件傳值。

一、父組件給子組件傳值----通過屬性

1.子組件需要做的事：

(1)創(chuàng)建一個子組件
(2)寫好子組件中自己的邏輯
(3)通過 props:[父組件傳值的key] 來接收父組件傳遞的值
props可接收對象（屬性為傳遞的值，屬性值為規(guī)定傳遞值的數(shù)據(jù)類型）、數(shù)組格式的值

2.父組件需要做的事：

(1)導(dǎo)入子組件

import subimagesilder from '../subcomponent/subimagesilder.vue';

(2)注冊子組件

  components:{
     subimagesilder 
  }

(3)在<template></template>中使用子組件

<subimagesilder :imageList="imageList"></subimagesilder>

注意：imageList是父組件給子組件傳遞的值
形式：<子組件對象 :父組件傳值的key=值></子組件對象>

二、子組件給父組件傳值----通過觸發(fā)自定義事件

1.子組件需要做的事:

(1)寫好子組件自己的代碼
(2)在需要傳值給父組件數(shù)據(jù)的地方定義并調(diào)用key事件

this.$emit(key,值)

key表示自定義事件名，值表示要傳遞的值
這里表示會觸發(fā)key事件
注意,這個key等下在父組件中要使用到

2.父組件需要做的事:

(1)導(dǎo)入子組件
(2)在components中注冊子組件
(3)在<template></template>中使用子組件
(4)在子組件的標簽中,注冊（綁定）key事件發(fā)生時執(zhí)行的函數(shù)名稱，例如:

 <subnumber v-on:key='函數(shù)名稱'></subnumber>

(5)在父組件的methods中,寫好接收子組件傳過來的值的函數(shù)即可，例如:

    methods:{
        函數(shù)名稱(子組件傳遞過來的值){
            xxxxxx
        }
    }

子組件負責(zé)觸發(fā)key事件，父組件負責(zé)注冊key事件

三、非父子組件之間傳遞值----通過Bus/總線/發(fā)布訂閱模式/觀察者模式(4種叫法)

1.創(chuàng)建一個公共的vue實例

• 方式1：創(chuàng)建一個公共的vue實例（在js中），并且導(dǎo)出，在傳值和接收值的兩方都引入這個js
• 方式2：Vue.prototype.bus = new Vue();
  表示先在Vue的原型上添加bus屬性，值為Vue的一個實例x。之后創(chuàng)建的Vue實例中都帶有bus屬性，并且bus屬性值都指向Vue實例x

2.在傳值的組件中,調(diào)用公共的vue實例。

通過 vue實例.$emit() 傳值。傳值方觸發(fā)自定義事件

3.在接收的組件中,調(diào)用公共的Vue實例。

通過 Vue實例.$on() 接收。接收方注冊自定義事件

注意：觸發(fā)和監(jiān)聽兩個操作必須在公共的vue實例中進行傳值和接收值