vue (13) mitt 跨元件資料傳遞

發表於 更新於 分類於
使用 mitt 跨元件資料傳遞

mitt 傳遞資料

當元件資料是內外曾在傳遞時，會使用 props 跟 emit，但如果是兩個不同的元件傳遞資料時，可以使用 mitt套件。

概念圖：

套件安裝

1
npm install --save mitt

引入套件

1
2
3
import mitt from 'mitt'

const emitter = mitt();

在要發出資料的元件內，用 emitter.emit(‘自訂名稱’, 資料) 來發出資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data() {
  return {
    product: {
      name: '蛋餅',
      price: 30,
      vegan: false
    },
  }
},
methods: {
  sendData() {
    emitter.emit('send-product', this.product);
  }
},

在要接收資料的元件內，在生命週期 created 內用 emitter.on 監聽事件

1
2
3
4
5
created() {
  emitter.on('send-product', (data) => {
    this.item = data;
  })
},