(1)父->子通信 props down
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<my-cart></my-cart>
</div>
<script type="text/javascript">
//父->子通信 props down
Vue.component('my-cart',{
template:`
<my-header myTitle="购物车"></my-header>
`
});
Vue.component('my-header',{
props:['myTitle'],
template:`
<h1>{{myTitle}}</h1>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<my-login></my-login>
</div>
<script type="text/javascript">
//父->子通信 props down
Vue.component('my-login',{
template:`
<form>
<my-input tips="请输入用户名" labelName="用户名"></my-input>
<my-input tips="请输入密码" labelName="密码"></my-input>
<my-button btnName="登录"></my-button>
<my-button btnName="注册"></my-button>
</form>
`
});
Vue.component('my-input',{
props:['labelName','tips'],
template:`
<div>
<span>{{labelName}}:</span>
<input type="text" :placeholder="tips" />
</div>
`
});
Vue.component('my-button',{
props:['btnName'],
template:`
<button>{{btnName}}</button>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
(2)子->父通信 event up
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<parent></parent>
</div>
<script type="text/javascript">
//子->父通信 event up push
Vue.component('parent',{
data:function(){
return {
myValue:''
}
},
methods:{
rcvMsg:function(msg){
//console.log(arguments);
console.log("接收到数据了"+msg);
this.myValue=msg;
}
},
template:`
<div>
<h1>这是父组件</h1>
<p>子组件信息:<span>{{myValue}}</span></p>
<hr/>
<son @toFather="rcvMsg"></son>
</div>
`
});
Vue.component('son',{
methods:{
handleClick:function(){
this.$emit('toFather','qq');
}
},
template:`
<div>
<h1>这是子组件</h1>
<button @click="handleClick">发送给父组件</button>
</div>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
(3)综合运用(页内聊天室)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<my-chatroom></my-chatroom>
</div>
<script type="text/javascript">
Vue.component('my-chatroom',{
data:function(){
return {
msgList:[]
}
},
methods:{
rcvMsg:function(msg){
console.log(msg);
this.msgList.push(msg);
}
},
template:`
<div>
<ul>
<li v-for="tmp in msgList">{{tmp}}</li>
</ul>
<my-user myName="lucy" @sendEvent="rcvMsg"></my-user>
<my-user myName="milk" @sendEvent="rcvMsg"></my-user>
</div>
`
});
Vue.component('my-user',{
props:['myName'],
data:function(){
return {
userInput:'',
canSend:false
};
},
methods:{
sendMsg:function(){
var msg=this.myName+":"+this.userInput;
this.$emit('sendEvent',msg);
this.userInput='';
this.canSend=false;
},
stateListen:function(){
//console.log("状态监听");
if(this.userInput.trim()!=''){
this.canSend=true;
}else{
this.canSend=false;
}
}
},
template:`
<div>
{{myName}}:<input type="text" placeholder="请输入" v-model="userInput" v-on:mouseout="stateListen">
<button :disabled="!canSend" @click="sendMsg()">发送</button>
</div>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
(4)扩展
1、ref 子->父
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<my-cart></my-cart>
</div>
<script type="text/javascript">
//ref 父->子
Vue.component('my-header',{
data:function(){
return {
isUserLogin:true
}
},
template:`
<div>
<h1>这是页头</h1>
</div>
`
});
Vue.component('my-cart',{
mounted:function(){
//console.log(this.$refs.header);
this.ulogin=this.$refs.header.isUserLogin;
},
data:function(){
return {
ulogin:false
}
},
template:`
<div>
<my-header ref="header"></my-header>
<ul v-if="ulogin">
<li>test01</li>
<li>test02</li>
<li>test03</li>
</ul>
</div>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
2、this.$parent 父->子(箭头是数据流通方向)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<parent></parent>
</div>
<script type="text/javascript">
Vue.component('parent',{
data:function(){
return {
myAge:30
}
},
template:`
<div>
<h1>这是父组件</h1>
<hr>
<son></son>
</div>
`
});
Vue.component('son',{
mounted:function(){
console.log(this.$parent.myAge); //会提升耦合度
},
template:`
<div>
<h1>这是子组件</h1>
</div>
`
});
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>