2018-09-25 组件（子传父-聊天记录）

<div id="app">
    <boy></boy>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("boy",{
        template:`
                <div>
                       <ul>
                        <li v-for="value in arr">{{value}}</li>
                       </ul>
                       <girl @send="resmsg" girlName="jack"></girl>
                       <girl @send="resmsg" girlName="rose"></girl>
                </div>
        `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            resmsg:function(akm){
                this.arr.push(akm)
            }
        }
    });
    Vue.component("girl",{
        props:["girlName"],
        template:`
        <div>
            <label for="">{{girlName}}</label>
            <input type="text" v-model="inputVal">
            <button @click="sendMsg">发送</button>
        </div>
        `,
        data:function(){
            return{
                inputVal:""
            }
        },
        methods:{
            sendMsg:function(){
//              this.$emit('事件',参数)
                this.$emit("send",this.girlName+":"+this.inputVal)
            }
        }
    });
    new Vue({
        el:"#app"
    });
</script>

结果如下：

QQ截图20180925191410.png