<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <template id="child-template"> <input v-model="msg"> <button v-on:click="notify">Dispatch Event</button> </template> <!-- 父组件模板 --> <div id="events-example"> <p>Messages: {{ messages | json }}</p> <child @:child-msg='msg'></child> </div> <script type="text/javascript"> Vue.component('Child',{ template:'#child-template', data:function(){ return { msg:'hello'} }, methods:{ notify: function () { if (this.msg.trim()) { this.$dispatch('child-msg', this.msg) this.msg = '' } } }
}) var partent=new Vue({ el:"#events-example", data:{ messages:[] }, events:{ 'child-msg':function(msg){ this.messages.push(msg) } } }) </script> </body> </html>
浙公网安备 33010602011771号