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