Heim > Artikel > Web-Frontend > Detailliertes Beispiel eines Chatrooms für die Kommunikation zwischen Vater und Sohn in der Vue-Komponente
Detailliertes Beispiel eines Chatrooms für die Kommunikation zwischen Vater und Sohn in der Vue-Komponente
- 小云云Original
- 2017-12-26 13:28:152005Durchsuche
In diesem Artikel wird hauptsächlich die Erstellung eines umfassenden Übungs-Chatrooms für die Eltern-Kind-Kommunikation vorgestellt. Ich hoffe, dass er für alle hilfreich ist.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件父子间通信之综合练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<chat-room></chat-room>
</p>
<script>
// 创建父组件
Vue.component("chat-room",{
//data属性中的chatList保存用户聊天信息
data:function(){
return{
chatList:[]
}
},
template:`
<p>
//假的聊天室
<h1>假的聊天室</h1>
<user-component userName="Rose"></user-component>
<user-component userName="Jack"></user-component>
//显示用户的聊天信息
<ul>
<li v-for="tmp in chatList">{{tmp}}</li>
</ul>
</p>
`
})
//创建子组件
Vue.component("user-component",{
props:["userName"],
//通过v-model把用户输入的数据保存到userInput数组
data:function(){
return {
userInput:[]
}
},
methods:{
//把用户输入的数据以及用户名label信息push给chatList数组
sendChat:function(){
this.$parent.chatList.push(this.userName+":"+this.userInput);
//情况input框
this.userInput =" ";
}
},
template:`
<p>
<label>{{userName}}</label>
<input type="text" v-model="userInput"/>
<button @click="sendChat">发送</button>
</p>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Umfassende Übung zur Kommunikation zwischen Komponenten:
(Requisiten runter, Ereignisse hoch)
Es gibt 2 Komponenten: Chatroom, Benutzer- Komponente
Benutzerkomponente besteht aus einer Beschriftungseingabetaste
Chatroom besteht aus zwei Benutzerkomponenten und einer Liste
①Rufen Sie Benutzerkomponente im Chatroom auf, um den Namen des Labels anzugeben
②Wenn
in der Benutzerkomponente auf die Schaltfläche klickt, werden die vom aktuellen Benutzer eingegebenen Informationen an die Chatroom-Komponente gesendet. Der Chatroom empfängt die Daten und zeigt sie in der Liste an
Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<p id="container">
<chat-room></chat-room>
</p>
<script>
Vue.component('chat-room',{
methods:{
recvMsg:function(msg){
console.log("在父组件中接收子组件传来的数据"+msg);
this.chatList.push(msg);
}
},
data: function () {
return {
chatList:[]
}
},
template:`
<p>
<h1>假的聊天室</h1>
<ul>
<li v-for="tmp in chatList">
{{tmp}}
</li>
</ul>
<user-component userName="Lucy" @sendToFather="recvMsg"></user-component>
<user-component userName="Merry" @sendToFather="recvMsg"></user-component>
</p>
`
})
Vue.component('user-component',{
props:['userName'],
data: function () {
return {
userInput:''
}
},
methods:{
sendToFather: function () {
//触发toFatherEvent的事件，把input中
//用户输入的数据发送
this.$emit("sendToFather",this.userName+":"+this.userInput);
}
},
template:`
<p>
<label>{{userName}}</label>
<input type="text" v-model="userInput"/>
<button @click="sendToFather">发送</button>
</p>
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>Verwandte Empfehlungen:
So entwickeln Sie einen Chatroom mit PHP
Geschrieben mit Node.js Echtzeit-Online-Chatroom
So erstellen Sie einen einfachen Chatroom mit PHP-Websocket
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel eines Chatrooms für die Kommunikation zwischen Vater und Sohn in der Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!