组件（聊天记录）

作者: 王诺岚 | 来源:发表于2018-09-25 19:03 被阅读0次

组件（聊天记录）
如何收集群精华？（详细操作步骤）
2018-09-25 组件（子传父-聊天记录）
他的孝
社交电商的神奇入口
2018-11-20
微信聊天记录如何恢复，用这个方法，小学生只用了2两分钟
千万富豪“聊天记录”刷屏：比圈子更重要的是思考能力！
vue组件之间的通信
给你爱的人一个善解人意的女朋友

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
<chat></chat>
</div>

<script src='js/vue.js'></script>
<script>
    Vue.component('chat',{
        template:`
             <div>

                <ul>
                   <li v-for="value in arr">{{value}}</li>
                </ul>
                <user @send='rcMsg' userName='jack'></user>
                <user @send='rcMsg' userName='rose'></user>
             </div>
           `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcMsg:function(txt){
                this.arr.push(txt)
            }
        }
    })

    Vue.component('user',{
        props:['userName'],
        template:`
            <div>
               <label>{{userName}}</label>
               <input type='text' v-model='inputVal'>
               <button @click='sendMsg'>发送</button>
            </div>
           `,
        data:function(){
            return{
                inputVal:''
            }
        },
        methods:{
            sendMsg:function(){
                this.$emit('send',this.userName+":"+this.inputVal)
            }
        }
    })



    new Vue({
        el:'#app'
    })
</script>

</body>
</html>