vue子組件使用自定義事件向父組件傳遞數據

2019-11-19 16:28:10

字體：大中小

來源：轉載

供稿：網友

使用v-on綁定自定義事件可以讓子組件向父組件傳遞數據，用到了this.$emit(‘自定義的事件名稱',傳遞給父組件的數據)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script></head><body><div id="app"><parent-component></parent-component></div><template id="parent-component"><div> <p>總數是{{total}}</p> <child-component @increment="incrementTotal"></child-component> <!--@increment是子組件this.$emit('increment'自定義的事件用來告訴父組件自己干了什么事 然后會觸發父子間incrementTotal的方法來更新父組件的內容)--></div></template><template id="child-component"> <button @click="increment()">{{mycounter}}</button></template><script> var child=Vue.extend({  template:"#child-component",  data:function () {   return {    mycounter:0   }  },  methods:{   increment:function(){    this.mycounter=10;    this.$emit("increment",this.mycounter);//把this.mycounter傳遞給父組件   }  } }) var parent=Vue.extend({  data:function () {   return {    total:0   }  },  methods:{   incrementTotal:function(newValue){    this.total+=newValue;   }  },  template:"#parent-component",  components:{   'child-component':child  } }) var vm=new Vue({  el:"#app",  components:{   'parent-component':parent  } })</script></body></html>

@increment是子組件this.$emit('increment'自定義的事件,newValue)用來告訴父組件自己干了什么事

同時還可以傳遞新的數據給父組件

然后會觸發父子間incrementTotal的方法來更新父組件的內容)。

這里需要注意幾個點：