js代码: Vue.component("balance",{ template:'<div><show @showbalance="show_balance"></show><div v-if="show">余额¥98</div></div>' ,//监听自定义事件 data:function(){ return{ show:false } }, methods:{ show_balance:function(){ this.show=true; } } }); Vue.component("show",{ template:'<button @click="on_click">显示余额</button>', methods:{ on_click:function(){ this.$emit("showbalance",{a:1,b:2});//触发自定义事件 } } }); var app =new Vue({ el:"#app" }) html代码:
<body> <div id="app"> <balance></balance> </div> <script src="js/vue.js"></script> <script src="js/components.js"></script> </body>