1.ref
父组件操作子组件:
<子组件 ref='名称'></子组件>
在父组件中可以通过:this.$refs.名称
(react: this.refs.名称)
子组件操作父组件:
this.$parent.属性或this.$emit('toFather','来自子组件的数据')
练习:
简单的聊天室
分析组件构成:
chat-room父组件
lucy 子组件:名称+input+按钮
mike 子组件:名称+input+按钮
功能实现:
目标:将子组件中用户输入的信息,发送之后,显示在chat-room的列表中。
数据存储在数组中:chat-room
数据操作:子组件点击发送时 往数组中插入数据
1.子组件与父组件通信:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Chat Room</title>
<style></style>
</head>
<body>
<div id="example">
<chat-room></chat-room>
</div>
<script type="text/x-template" id="chatRoomTemplate">
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<lucy></lucy>
<mike></mike>
</div>
</script>
<script type="text/x-template" id="lucyTemplate">
<div>
<label>lucy</label>
<input type="text" v-model="lucyText">
<button @click="send">Send</button>
</div>
</script>
<script type="text/x-template" id="mikeTemplate">
<div>
<label>mike</label>
<input type="text" v-model="mikeText">
<button @click="send">Send</button>
</div>
</script>
<script src="js/vue.js"></script>
<script>
Vue.component('chat-room',{
template:'#chatRoomTemplate',
data:function(){
return {
list:[]
}
}
});
Vue.component('lucy',{
template:"#lucyTemplate",
data:function(){
return {
lucyText:''
}
},
methods:{
send:function(){
this.$parent.list.push('lucy:'+this.lucyText);
}
}
});
Vue.component('mike',{
template:'#mikeTemplate',
data:function(){
return {
mikeText:''
}
},
methods:{
send:function(){
this.$parent.list.push('mike:'+ this.mikeText);
}
}
});
new Vue({
el: '#example',
data: {
msg: 'Hello component!'
}
});
</script>
</body>
</html>
2.兄弟组件之间通信
4、兄弟组件之间通信
借助于事件
var bus = new Vue()
this.$emit()
this.$on()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style></style>
</head>
<body>
<div id="example">
<laoda></laoda>
<hr/>
<laoer></laoer>
</div>
<script type="text/x-template" id="laoda-template">
<div>
<h1>laoda</h1>
<button @click="tellLaoer">SendMsgToLaoer</button>
</div>
</script>
<script type="text/x-template" id="laoer-template">
<div>
<h1>laoer</h1>
<span v-if="msgFromLaoda">{{'Laoda saied: ' + msgFromLaoda}}</span>
</div>
</script>
<script src="js/vue.js"></script>
<script>
//新建一个Vue的实例,通过bus来完成事件的绑定和解绑
var bus = new Vue();
Vue.component('laoda',{
template:'#laoda-template',
methods:{
tellLaoer:function(){
//触发事件,通知laoer
bus.$emit('eventToBrother','Go home new!');
}
}
});
Vue.component('laoer',{
template:'#laoer-template',
data:function(){
return {
msgFromLaoda:null
}
},
mounted:function(){
//完成事件的绑定
bus.$on('eventToBrother',function(result){
console.log(result);
this.msgFromLaoda = result;
}.bind(this));
}
});
new Vue({
el: '#example',
data: {
msg: 'Hello component!'
}
});
</script>
</body>
</html>