组件之间通信案例--简单的聊天室

1.ref
父组件操作子组件：

<子组件 ref='名称'></子组件>
在父组件中可以通过:this.$refs.名称
(react: this.refs.名称)

子组件操作父组件：
this.$parent.属性或this.$emit('toFather','来自子组件的数据')

练习：
简单的聊天室

分析组件构成：
chat-room父组件
lucy 子组件：名称+input+按钮
mike 子组件：名称+input+按钮

功能实现：
目标：将子组件中用户输入的信息，发送之后，显示在chat-room的列表中。

数据存储在数组中：chat-room
数据操作：子组件点击发送时往数组中插入数据

1.子组件与父组件通信：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <style></style>
</head>
<body>
<div id="example">
    <chat-room></chat-room>
</div>
<script type="text/x-template" id="chatRoomTemplate">
    <div>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <lucy></lucy>
        <mike></mike>
    </div>
</script>

<script type="text/x-template" id="lucyTemplate">
    <div>
        <label>lucy</label>
        <input type="text" v-model="lucyText">
        <button @click="send">Send</button>
    </div>
</script>
<script type="text/x-template" id="mikeTemplate">
    <div>
        <label>mike</label>
        <input type="text" v-model="mikeText">
        <button @click="send">Send</button>
    </div>
</script>

<script src="js/vue.js"></script>
<script>
    Vue.component('chat-room',{
        template:'#chatRoomTemplate',
        data:function(){
        return {
            list:[]
        }
    }
    });

    Vue.component('lucy',{
        template:"#lucyTemplate",
        data:function(){
            return {
                lucyText:''
            }
        },
        methods:{
            send:function(){
                this.$parent.list.push('lucy:'+this.lucyText);
            }
        }
    });
    Vue.component('mike',{
        template:'#mikeTemplate',
        data:function(){
            return {
                mikeText:''
            }
        },
        methods:{
            send:function(){
                this.$parent.list.push('mike:'+ this.mikeText);
            }
        }
    });

    new Vue({
        el: '#example',
        data: {
            msg: 'Hello component!'
        }
    });
</script>
</body>
</html>

2.兄弟组件之间通信

4、兄弟组件之间通信
借助于事件
var bus = new Vue()

this.$emit()

this.$on()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style></style>
</head>
<body>
<div id="example">
    <laoda></laoda>
    <hr/>
    <laoer></laoer>
</div>

<script type="text/x-template" id="laoda-template">
<div>
    <h1>laoda</h1>
    <button @click="tellLaoer">SendMsgToLaoer</button>
</div>
</script>

<script type="text/x-template" id="laoer-template">
    <div>
        <h1>laoer</h1>
        <span v-if="msgFromLaoda">{{'Laoda saied: ' + msgFromLaoda}}</span>
    </div>
</script>
<script src="js/vue.js"></script>
<script>
    //新建一个Vue的实例，通过bus来完成事件的绑定和解绑
    var bus = new Vue();

    Vue.component('laoda',{
        template:'#laoda-template',
        methods:{
            tellLaoer:function(){
                //触发事件，通知laoer
                bus.$emit('eventToBrother','Go home new!');

            }
        }
    });
    Vue.component('laoer',{
        template:'#laoer-template',
        data:function(){
          return {
              msgFromLaoda:null
          }
        },
        mounted:function(){
        //完成事件的绑定
            bus.$on('eventToBrother',function(result){
                console.log(result);
                this.msgFromLaoda = result;
            }.bind(this));
    }
    });
    new Vue({
        el: '#example',
        data: {
            msg: 'Hello component!'
        }
    });
</script>
</body>
</html>

组件之间通信案例--简单的聊天室

猜你喜欢