iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 30

30 Vue組件 - $emit發送自訂事件

Vue組件的props是單向數據流,所以只能從上傳到下,要由下傳到上的話要使用$emit自訂事件,以下範例:

<div id="app">
  <my-button @button-click="parentClicked"></my-button>
</div>

<script>
Vue.component('my-button',{
  template: '<button @click="myClick">button</button>',
  methods:{
  myClick(){
  this.$emit("button-click")
}
}
});
  new Vue({
    el:"#app",
    methods:{
      parentClicked(){
        console.log("button clicked");
      }
    }
  });
</script>

建立一 個組件my-button,偵聽button的click事件並綁定methods裡的myClick function,而這個myClick 事件透過$emit發出一個名為button-click的事件,在HTML模板使用v-on:事件名稱去接收事件後,執行Vue實例內的parentClicked function。

$emit外帶資料

emit除了傳遞事件名稱之外還可以攜帶資料:

this.$emit("button-click", 777)
//接收資料
methods:{
  parentClicked(num){
    console.log(num);
  }
}

也可以傳遞很多組資料

this.$emit("button-click", "蜂","蜜","檸","檬");
//接收資料
methods:{
  parentClicked(t1,t2,t3,t4){
    console.log(t1+t2+t3+t4);
  }
}

組件的原生事件偵聽

若組件不是要傳遞自訂事件,而是要偵聽這個組件的原生事件如:click、mouseover、load,事件後需加修飾符.native

<div id="app">
  <my-button @click.native="myButtonClicked"></my-button>
</div>

今天是參賽最後一天了,這三十天真的是近幾年內過的最慢的三十天了...,也體悟要把學到的東西打成文章是多麼困難的事,真的要打的時候才發現:啊我怎麼好像哪裡不是很懂......,不然就是:好像忘了耶打不出來ㄟ,諸如此類的狀況發生......
/images/emoticon/emoticon16.gif

如果沒有組隊我是絕對完成不了的,雖然很沒出息的中後半段都寫得很混XD學完新的就忘了舊的,但還是很高興沒出息的我寫滿三十天了,撒花~~~~~~~~~~
/images/emoticon/emoticon42.gif

謝謝我的隊伍這樣母Tom姆熊、謝謝天、謝謝地、謝謝蜂蜜檸檬那溫柔的歌聲陪我度過崩潰的夜晚,請容許我好好睡一個星期的覺再繼續把這系列文章完成,完成日期未知XD


上一篇
29 Vue組件 - props(3)
系列文
從0開始vue.js的30天學習日誌30

尚未有邦友留言

立即登入留言