Flask接口签名sign原理与实例代码浅析
294
2023-03-19
vue组件父子间通信之综合练习(聊天室)
本文实例为大家分享了vue组件父子间通信之聊天室的具体代码,供大家参考,具体内容如下
{{msg}}
// 创建父组件
Vue.component("chat-room",{
//data属性中的chatList保存用户聊天信息
data:function(){
return{
chatList:[]
}
},
template:`
//假的聊天室
//显示用户的聊天信息
`
})
//创建子组件
Vue.component("user-cohttp://mponent",{
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:`
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
组件间通信综合练习:
(props down,events up)
有2个组件:chat-room,user-component
user-component是由label input button构成
chat-room是由两个user-component和一个列表构成
①在chat-room调用user-component指定label的名字
②在user-component,
点击按钮时,将当前用户输入的信息发送给chat-room组件,chat-room接收到数据显示在列表中
代码:
Vue.component('chat-room',{
methods:{
recvMsg:function(msg){
console.log("在父组件中接收子组件传来的数据"+msg);http://
this.chatList.push(msg);
}
},
data: function () {
return {
chatList:[]
}
},
template:`
{{tmp}}
`
})
Vue.component('user-component',{
props:['userName'],
data: function () {
return {
userInput:''
}
},
methods:{
sendToFather: function () {
//触发toFatherEvent的事件,把input中
//用户输入的数据发送
this.$emit("sendToFather",this.userName+":"+this.userInput);
}
},
template:`
<input type="text" v-model="userInput"/>
`cUGwh
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~