vue组件父子间通信之综合练习--假的聊天室

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>组件父子间通信之综合练习</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <chat-room></chat-room>
    </div>
    <script>
//    创建父组件
        Vue.component("chat-room",{
        //data属性中的chatList保存用户聊天信息
            data:function(){
                return{
                    chatList:[]
                }
            },
            template:`
                <div>
                    //假的聊天室
                    <h1>假的聊天室</h1>
                    <user-component userName="Rose"></user-component>
                    <user-component userName="Jack"></user-component>
                    //显示用户的聊天信息
                    <ul>
                        <li v-for="tmp in chatList">{{tmp}}</li>
                    </ul>
                </div>
            `
        })
    //创建子组件    
        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:`
                <div>
                    <label>{{userName}}</label>
                    <input type="text" v-model="userInput"/>
                    <button @click="sendChat">发送</button>
                </div>
            `
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

组件间通信综合练习：
（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接收到数据显示在列表中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>
<div id="container">
    <chat-room></chat-room>
</div>
<script>
  Vue.component('chat-room',{
        methods:{
            recvMsg:function(msg){
                console.log("在父组件中接收子组件传来的数据"+msg);
                this.chatList.push(msg);
            }
        },
    data: function () {
      return {
        chatList:[]
      }
    },
    template:`
      <div>
                <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>
        </div>
        `
  })
  Vue.component('user-component',{
    props:['userName'],
    data: function () {
      return {
        userInput:''
      }
    },
    methods:{
      sendToFather: function () {
        //触发toFatherEvent的事件，把input中
        //用户输入的数据发送
        this.$emit("sendToFather",this.userName+":"+this.userInput);
     }
    },
    template:`
      <div>
        <label>{{userName}}</label>
        <input type="text" v-model="userInput"/>
        <button @click="sendToFather">发送</button>
      </div>
      `
  })
  new Vue({
    el: '#container',
      data: {
        msg: 'Hello Vue'
      }
  })
</script>
</body>
</html>

以上是 vue组件父子间通信之综合练习--假的聊天室 的全部内容， 来源链接： utcz.com/z/378374.html

回到顶部