Vue 组件间的通讯

一、首先是父组件传给子组件

var startVue_1 = new Vue({
        el:'#container-1',
        data:{
            g3:'3'
        },
        components: {
            'lchild':{
                props:['papa'],
                template:"<input class = 'input' v-model='papa' type='text' placeholder='我局部子组件'></input>"
            }
        },
    });

// html
<div class = 'container' id='container-1'>
   <lchild :papa='g3'></lchild>
</div>

这样lchild这个组件就接收到了g3的值，并绑定；

二、子组件传给父组件

修改一下代码：

var startVue_1 = new Vue({
        el:'#container-1',
        data:{
            g3:'3'
        },
        components: {
            'my-component': board,
            'lchild':{
                props:['papa'],
                data:function(){
                    return {
                        g6:'6'
                    }
                },
                template:"<input class = 'input'    v-model='g6' @blur='backData' placeholder='我局部子组件'></input>",
                methods: {
                    backData:function(){
                        // 派发事件 back，在父组件处接收
                        this.$emit('back',this.g6)
                    }
                }
            }
        },
        methods:{
            //  接收到back事件执行setD
            setD:function(e){
                this.g3 = e
            }
        }
    });

然后在父组件处监听事件：

<input v-model='g3' placeholder='我是直接写出来的' class = 'input'>

<lchild @back='setD'></lchild>

执行，看下结果：（结果正常，子组件传值成功）

三、子组件与子组件之间的通讯

这里只是简单地结合一二，把值传给父组件，再把值传给另外一个子组件

Vue.component('gchild',{
        template:"<div class = 'inputItem'><h4>全局：</h4><input class = 'input' type='text' v-model='data' placeholder='我全局子组件'></input></div>",
        props:['data']
})

再在html处绑定：

<gchild :data='g3'></gchild>

执行：

四、两个不同实例的传值

其实这个最简单，和普通的对象传值一样，直接拿到

var startVue_1 = new Vue({
        el:'#container-1',
        data:{
            g3:'3'
        }
})

 var startVue_2 = new Vue({
        el:'#container-2',
        data:{
            // 这样就拿到了startVue_1的g3的值
            g2:startVue_1.$data.g3
        }
    })