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>

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

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

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