<script type="x/template" id="child-template"> <input v-model="msg"> <button v-on:click="notify">Dispatch Event</button></script><div id="events-example" class="demo"> <p>Messages: {{ messages | json }}</p> <child v-on:child-msg="handleIt"></child></div><script> Vue.component('child', { template: '#child-template', data: function () { return { msg: 'hello' } }, methods: { notify: function () { if (this.msg.trim()) { this.$dispatch('handleIt', this.msg); this.msg = '' } } } }) var parent = new Vue({ el: '#events-example', data: { messages: [] }, events: { 'handleIt': function (msg) { this.messages.push(msg) } } })</script>如上代碼中,自定義的child-msg事件是如何觸發的并最終執行了handleIt函數?
vue.js自定義事件如何觸發的?
慕虎7371278
2018-08-02 10:09:27