【Vue3】mitt跨元件傳資料

Vue3

【Vue3】mitt跨元件傳資料

Vue3


使用mitt套件

  1. 引入mitt的CDN

  1. 定義mitt套件

  1. 在發送資料元件的方法上使用emit(自訂事件名稱,要傳的資料)

  1. 在接收資料元件的created方法上使用emit(自訂事件名稱,函式)

1
2
3
4
<div id="app">
  <show-component></show-component>
  <send-component></send-component>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const emitter = mitt();

const app = Vue.createApp({})

app.component('show-component',{
  data(){
    return{
      item:{}
    }
  },
  created(){
    emitter.on("fruitsData",(item)=>{
      this.item = item;
    })
  },
  template:`
    <div class="card">
      <div class="card-body">
        {{ item }}
      </div>
    </div>
  `
})

app.component('send-component',{
  data(){
    return{
      data:{
        name: "蘋果"
      }
    }
  },
  methods:{
    sendData(){
      emitter.emit("fruitsData",this.data)
    }
  },
  template:`
    <button type="button" @click="sendData">按鈕</button>
  `
})

app.mount("#app");

Vue3 

其他相關