组件（聊天记录）

<!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>
组件（聊天记录）

推荐阅读更多精彩内容
