vue2.0組件通訊

組件通訊

組件通訊方式類別

1. VueJs提供的props和自定義事件
2. eventbus
3. vuex

通訊方式	區別
props	用於父組件傳遞數據給子組件
自定義事件	用於子組件向父組件通訊
eventBus	適用於非父子組件通訊的簡單場景，使用一個空的vue實例做爲中央事件總線
Vuex	狀態管理，適用於複雜場景

props

父組件傳遞數據給子組件：
1.子組件顯示地用props選項申明得到的數據：

export default {
  name: 'vheader',
  props:['myMessage','myData'],
}

2.父組件傳遞數據

<v-header  my-message="vue2.0"  my-data="propsdownData"></v-header>

至此，子組件將獲取到數據vue2.0和porpsdownData

自定義事件

每一個vue實例都實現了事件接口：

• $on(eventName)監聽事件（不能用 $on 偵聽子組件釋放的事件，而必須在模板裏直接用 v-on 綁定）
• $emit(eventName)觸發事件
  例如：

//App.vue 父組件
<template>
    <div id=」counter-event-example」>
        <p>{{ total }}</p>
        <button-counter v-on:increment=」incrementTotal」></button>
    </div>
</template>

import buttonCounter from ‘./buttonCounter.vue’
exoprt default{
   name:’app’,
   data(){
    return{
        Counter:0
    }
   },
   componts:{
    buttonCounter:buttonCounter
    },
    methods(){
        incrementTotal(){
            This.total += 1
        }
    }
}

//buttonCounter.vue 子組件
<template>
    <div>
        <button @click=」incrementCounter」>點擊觸發父組件事件</button>
    </div>
</template>
exoprt default{
    name:’buttonCounter’,
    methods(){
    incrementCounter(){
        this.$emit(‘increment’)
      }
    }
}

注意點
1.每次父組件更新，子組件全部prop會更新爲最新值。所以，不能在子組件內部改變prop，若是作了，vue會在控制檯給出警告。
2.注意在 JavaScript 中對象和數組是引用類型，指向地址，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

eventbus

1.建立中央事件總線eventbus.js:

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

2.建立v-component-a.vue子組件

<template>
  <div class="box">
      <h3>子組件A(event bus)</h3>
      <el-button style="margin-top:10px" type="primary" @click="touchCompontB">點擊我觸發子組件B的事件</el-button>
  </div>
</template>

<script>
import eventbus from '../eventbus.js'

export default {
  name: 'box',
  data () {
    return {
      name: ''
    }
  },
  methods:{
    touchCompontB(){
      eventbus.$emit('getName',['子組件b'])
    }
  },
}
</script>

3.建立v-component-b.vue子組件

<template>
  <div class="box">
      <h3>子組件B {{name}}</h3>
      <el-button style="margin-top:10px" type="primary" @click="getMyMsg('本身')">點擊我觸發本身組件的事件</el-button>
  </div>
</template>

<script>
import eventbus from '../eventbus.js'

export default {
  name: 'box',
  data () {
    return {
      name: ''
    }
  },
  methods:{
    getMyMsg(arg){
      let msg="觸發了"+arg+"組件的方法"
      alert(msg)
    }
  },
  created(){
   eventbus.$on('getName',(arg)=>{    
    this.getMyMsg(arg)
   })
 }
}
</script>

4.在父組件註冊兩個子組件

<template>
  <div id="app">
    <div class="parentCpt">       
      <div class="clear" style="width:100%">
        <div style="float:left;" class="cptWrap">
          <v-component-a></v-component-a>
        </div>
        <div style="float:right" class="cptWrap">
          <v-component-b></v-component-b>           
        </div>
      </div>         
    </div>
  </div>
</template>

<script>
import vComponentA from './components/v-component-a.vue'
import vComponentB from './components/v-component-b.vue' 
export default {
  name: 'app',
  components:{
    vComponentA:vComponentA,
    vComponentB:vComponentB
  }
}
</script>

注意點：

eventbus.$on('getName',(arg)=>{    
    this.getMyMsg(arg)
 })

若寫成es6的箭頭函數，則直接寫this，不然須要先在eventbus.$on以前將this賦值給let self=this;

Vuex