<!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>