組件通訊的方式有哪些

• props傳遞數據

步驟：

• 首先，在子組件中聲明props選項

• 其次，在子組件中使用v-bind指令動態綁定屬性，通過插值表達式動態獲取數據

• 最後，在父組件的template中調用子組件標簽的使用傳遞數據

示例：

 在子組件MovieItem.vue中

<template>
  <div class="series-item-box">
    <div>
      <img
        :src="imgpath"
      />
    </div>
    <div class="detail">
      <div class="detail-title">{{title}}</div>
      <div class="detail-score">{{score}}</div>
    </div>
  </div>
</template>

<script>
export default {
    props:['imgpath','title','score']
};
</script>

在父組件MovieList.vue中

<template>
    <div>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg"
            title="大話西游之大聖娶親"
            score="9.6"/>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg"
            title="哈利·波特與魔法"
            score="9.0"/>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"
            title="當幸福來敲門"
            score="9.3"/>
    </div>
</template>

<script>
import MovieItem from './MovieItem.vue'
export default {
    components:{
        MovieItem
    }
}

• 自定義事件及$emit方法

語法：this.$emit('event',val)

步驟：

• 首先，子組件在觸發事件時調用this.$emit()設置自定義事件並傳值

• 其次，在父組件引用子組件標簽時使用@自定義事件=“接受子組件傳遞數據的方法”設置接受方法

• 最後，在父組件中使用接受方法中獲取數據並使用

在子組件中

<template>
  <div class="series-item-box">
    <div class="pic">
      <img
        :src="imgpath"
      />
    </div>
    <div class="detail">
      <div class="detail-title">{{title}}</div>
      <div class="detail-score">{{score}}</div>
    </div>
    <div>
        <button @click="bookTicket">購票</button>
    </div>
  </div>
</template>

<script>
export default {
    props:['imgpath','title','score'],
    methods:{
        bookTicket(){
            this.$emit('make',this.title)
        }
    }
};
</script>

在父組件中

<template>
    <div>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"
            title="當幸福來敲門"
            score="9.3"
            @make="getval"/>
    </div>
</template>

<script>
import MovieItem from './MovieItem.vue'
export default {
    components:{
        MovieItem
    },
    methods:{
        getval(val){
           console.log(val);
        }
    }
}
</script>

• 事件匯流排

步驟：

• 創建eventBus.js模塊，並向外共用一個Vue的實例對象

• 在數據發送方，調用bus.$emit('事件名稱',要發送的數據)方法觸發自定義事件

• 在數據接收方，調用bus.$on('事件名稱',事件處理函數)方法註冊一個自定義事件

新建 eventBus.js

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

數據發送方

<template>
    <button @click="send">發送數據</button>
</template>
<script>
import bus from './eventBus.js'
export default {
    data(){
        return{
            msg:'故人西辭黃鶴樓'
        }
    },
    methods:{
        send(){
            bus.$emit('share',this.msg)
        }
    }
}
</script>

數據接收方

<template>
    <h2>{{fromsendMsg}}</h2>
</template>
<script>
import bus from './eventBus.js'
export default {
    data(){
        return{
            fromsendMsg:''
        }
    },
    created(){
        bus.$on('share',val=>{
            this.fromsendMsg=val;
        })
    }
}
</script>