vue2.0 : 組件間的通訊

組件間的通訊有兩種：一、父組件與子組件之間的通訊；二、非父子組件間通訊；

1、父組件與子組件之間的通訊

父組件傳遞數據給子組件（使用props）：

父組件：

<template>
　　<div style="width:100%">
　　　　<child :showMessageContent="childMessage"></child>
　　</div>
</template>
<script type="text/javascript">
　　export default {
　　　　name: 'parent',
　　　　data: {
　　　　　　childMessage:'mmm'
　　　　}
　　}
</script>

子組件：

<template>
    <div style="text-align: left;padding:20px;font-size:14px;color:blue;">
        <p>{{showMessageContent}}</p>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'child',
        props: {
            showMessageContent:{
                type: String,
                default: ''
            }
        }
    }
</script>

 

子組件傳遞數據給父組件($emit觸發父組件的方法進行數據通訊)：

 父組件：

<template>
　　 <div style="width:100%">
　　　　  <child :showMessageContent="childMessage" @showHello="hello"></child>
　　 </div>
</template>
<script type="text/javascript">
　　export default {
　　　　 name: 'parent',
　　　　 data: {
　　　　　　 childMessage:'mmm'
　　　　 },
        methods:{
            hello(data){
                console.log('data',data);
            }
        } 
　　} 
</script>

子組件：

<template>
    <div style="text-align: left;padding:20px;font-size:14px;color:blue;">
        <p @click="helloParent">{{showMessageContent}}</p>
    </div>
</template>
<script type="text/javascript">
    export default {
        name: 'child',
        props: {
            showMessageContent:{
                type: String,
                default: ''
            }
        },
        methods:{
            helloParent(){
                this.$emit('showHello','xxx');
            }
        }
    }
</script>

p元素上增長點擊事件，經過$emit 觸發父組件的方法進行通訊。

控制檯打印結果：

子組件向父組件通訊還能夠經過$.dispatch，本身未用過此種方式，後續對此進行補充。

2、非父子組件間通訊（$emit,$on）

例子目的：組件A的信息傳遞給組件B

 建立一個公共js文件,設計一條總線，即一個事件中心（中轉站）。

//建立bus.js文件

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

組件A:

import Bus from '../common/bus.js';
export default {
  name: 'A',
  data () {
    return {
      msg: 'message A'
    }
  },
  methods:{
    sendByClick(){
      Bus.$emit('send',this.msg);
    }
  }
}

組件B:

import Bus from '../common/bus.js';
export default {
  name: 'B',
  data () {
    return {
      msgB: ''
    }
  },
  mounted:function(){
    let _this = this;
    Bus.$on('send', function(msg){
      _this.msgB = msg ;
      console.log(_this.msgB);
    });
  }
}

控制檯打印結果：

收穫紀錄😄