vue 父子组件通信，利用对象进行通信

大家都知道vue父子组件间通信用到了props，$emit。

通过props可以实现父向子通信，通过$emit可以实现子向父通信，现在我要介绍另外一种方式，通过props传对象的形式通信。

首先写一个简单的例子

//父组件
<parent>
    <input type="text" v-model="parent.name" />
    <myChild :child="parent"></myChild>
</parent>

export default {
    data(){
        return{
            parent:{
                name:'父级名称',
            }
        }
    }
}

//子组件
<children>
    <input type="text" v-model="child.name" />
</children>
export default {
    props:['child']
}

这样就通过props完成了简单的父向子的传递，但是我传的是一个对象，你可以试下，在子级里修改input父级居然也跟着变了，居然没用emit也完成了子向父的通信。
这样对象的形式不光是可以传递简单的值，还可以调用父级的方法，比如：

//父组件
<parent>
    <input type="text" v-model="parent.name" />
    <myChild :child="parent"></myChild>
</parent>

export default {
    data(){
        return{
            parent:{
                alert:function(txt){
                    alert(txt)
                }
            }
        }
    }
}

//子组件
<children>
    <button @click="child.alert('我是子级')">提交</button>
</children>
export default {
    props:['child']
}

直接在父级对象里写一个方法，子级居然直接就可以调用了