<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <!-- 定義一個組件login,組價中實現插值，事件等以及父子組件傳值 --> <login :name="name"></login> <!-- send子組件向父組件傳值，通過$emit("send",要傳的數據)，父監聽send後執行getData接收數據 --> <send v-on:send="getData">send</send> </div> <template id="login"> <div class="login"> <h3>{{name}}</h3> <input type="text"> </br> <input type="text"> </br> <button @click="diandian">Login</button> </div> </template> <template id="send"> <div > <h1 @click="send">sendData</h1> </div> </template> <script> var bus=new Vue() Vue.component("login",{ props:{ name:String }, template:"#login", data:function(){ return{ msg:"Please Login" } }, methods:{ diandian:function(){ console.log("我是點點") } }, created:function(){ bus.$on("log",function(msg){ console.log(msg) }) } }) Vue.component("send",{ template:"#send", methods:{ send:function(){ //this.$emit('send',{aa:11,bb:33}) bus.$emit("log","我是同級傳送的send組件") } } }) var app=new Vue({ el:"#app", data:{ name:"jinwie" }, methods:{ getData:function(data){ console.log(data) } } }) </script> <style> .login{ text-align:center; background-color:honeydew; width:10rem; margin-left: 40rem; margin-top: 10rem; } </style> </body> </html>