<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <div id="app"> <balance></balance> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
Vue.component("balance",{ template:` <div> <show @show-balance="show_balance()"></show> <div v-if="show"> 您的余额是：$9999999! </div> </div> `, methods:{ show_balance:function () { console.log("可以来") this.show = true } }, data:function () { return { show:false, } } }) Vue.component("show",{ template:` <button @click="on_click()">显示余额</button> `, methods:{ on_click(){ console.log("caonidaye") this.$emit("show-balance") } } }) new Vue({ el:"#app" })
