組件通訊的方式有哪些

  • 2022 年 6 月 25 日
  • 筆記

  • 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="//img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg"
            title="大話西遊之大聖娶親"
            score="9.6"/>
        <movie-item 
            imgpath="//img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg"
            title="哈利·波特與魔法"
            score="9.0"/>
        <movie-item 
            imgpath="//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="//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>

 

VirMach 便宜 VPS

QNews

QNews