前端mvvm框架vue.js（3）——父子组件通信

vue.js父子组件通信：1，父组件向子组件传递数据，通过props，注意数据绑定是单向的(借鉴了react);2,子组件向父组件传递数据，通过在子组件自定义事件，使用this.$dispatch()触发自定义事件，事件冒泡到父组件，同时在父组件内通过events或者methods，声明回调函数，同时通过this.$dispatch()传递的参数将传给父组件在events和methods中的会调函数，此时可以在回调函数中操作参数。

1，父组件向子组件传递数据

<div id="prop">
    <input v-model="parentMSG">
    <child :my-message="parentMSG"></child>
</div>

  //props传递父组件数据,默认为单向绑定，注意:字面量语法传递的是字符串，如需要传递实际数值，需使用动态语法v-bind:或缩写模式:（也即可以看成是表达式的方式）,支持修饰符.sync和.once绑定修饰符，绑定动态props，注意使用驼峰形式的props时，需要转换为短横杠的形式
    Vue.component("child",{
        props:{
            myMessage:{
                type:String,
                required:true,
                coerce:function(str){
                    return str.slice(2);
                }
            }
        },
        template:"<span>{{myMessage}}</span>"
    });
    var propVM=new Vue({
        el:"#prop",
        data:{
            parentMSG:""
        }
    })
//此例中我们通过v-model将input中的数据绑定到父组件模板中，此时input和父组件数据是双向绑定,input数据传递给在子组件中定义的props，再将props传递给子组件中的span子元素，实时更新

2，子组件向父组件传递数据

<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify" >触发自定义事件</button>
    {{childmsg}}
</template>
<div id="events-example">
    <p>Message:{{messages|json}}</p>
//通过methods方法时，注意需要在父组件模板中的子组件上绑定事件
    <child v-on:child-msg="handleIt"></child>
//通过events方法时，只需在父组件的选项对象中events，写入child-msg方法
//我们还可以在父组件事件监听回调中，通过props将数据传回个子组件
    <child :childmsg="messages"></child>
</div>

    Vue.component("child",{
        template:"#child-template",
        data:function(){
            return {msg:"hello"};
        },
        methods:{
         //这里是button按钮点击后的事件处理函数
            notify:function(){
                if(this.msg.trim()){
        //在这里我们绑定了一个子定义的事件child-msg,同时传入一个参数,此参数可以传递给父组件的事件回掉函数
                    this.$dispatch("child-msg",this.msg);
                    this.msg="";
                }
            }
        }
    });
    var eventParent=new Vue({
        el:"#events-example",
        data:{
            messages:[]
        },
        props:{parentprop:""},
//我们可以在这里注册子组件自定义事件监听回调
        methods:{
            // handleIt:function(msg){
            //    console.log("子组件回调函数");
            //    this.messages.push(msg);
            // }
        },
//同时我们也可以在events中注册子组件自定义事件监听回调
        events:{
            "child-msg":function(msg){
               this.messages.push(msg);
               this.parentprop=msg;
               console.log("子组件事件被触发");
            }
        }
    })