Vue2.x中组件之间的通信

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mm_hello11/article/details/82941086

在Vue1.x中

子组件获取父组件数据（儿子获取父亲数据）

通过选项对象中的props，通过sync子组件能改变父组件的数据

    <template id="child">
        <div>
            <span>我是子组件</span>
            <input type="button" value="按钮" @click="change">
            <strong>{{msg}}</strong>
        </div>
    </template>

    <div id="box">
        父级: ->{{a}}
        <br>
        <child-com :msg.sync="a"></child-com>
    </div>

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    a:'我是父组件数据'
                },
                components:{
                    'child-com':{
                        props:['msg'],
                        template:'#child',
                        methods:{
                            change(){
                                this.msg='被更改了'
                            }
                        }
                    }
                }
            });
        };
    </script>

关于props

  //方式一：用数组的方式
  props:['m','myMsg']
  //方式二：用json的形式，也就是给数据定义一个数据类型
  props:{
     m': String,
    'myMsg': Number
  }

关于sync

子组件可以更改父组件信息（数据），可以是同步的sync（:msg.sync="父组件数据名"），在利用props获取父级数据的时候加上sync

在Vue2.x中

1、子组件获取父组件数据

子组件不能直接给父组件数据直接赋值操作（也就是直接修改数据），因为当项目大的时候一个子组件数据更改会引发一系列问题就很麻烦。

所以可以转个弯改变，那就是父组件每次传一个对象给子组件，利用元素js中对象是引用的（公用一个内容地址的，一个地方改变了值，别的引用它的地方都会相应改变这个值）

    <template id="child">
        <div>
            <span>我是子组件</span>
            <input type="button" value="按钮" @click="change">
            <strong>{{msg.a}}</strong>
        </div>
    </template>

    <div id="box">
        父级: ->{{giveData.a}}
        <br>
        <child-com :msg="giveData"></child-com>
    </div>

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    giveData:{
                        a:'我是父组件数据'
                    }
                },
                components:{
                    'child-com':{
                        props:['msg'],
                        template:'#child',
                        methods:{
                            change(){
                                //this.msg='被更改了'
                                this.msg.a='被改了';
                            }
                        }
                    }
                }
            });
        };
    </script>

2、父组件获取子组件数据

子组件主动把自己的数据通过$emit()，发送到父级，父组件的模板中有个“事件”，父组件接收的时候用的是“@”（是自定义事件，若有子级数据发送就会触发）

子级：vm.$emit(事件名,数据);
父级： v-on:xxx="xxx" <===> @xxx="xxx"

    <div id="box">
        <com-a></com-a>
    </div>
    <template id="testA">
        <div>
            <span>我是父级 => {{msg}}</span>
            <com-b @child-msg="get"></com-b> <!-- 这个首先就是子组件的展示区，其次在挂载自定义事件，当子组件有数据发送的时候就会触发 -->
        </div>
    </template>
    <template id="testB">
        <div>
            <span>子组件</span><input type="button" value="发送数据" @click="send" />
        </div>
    </template>


<script>
    var comA = {
        data() {
            return {
                msg:'',
            }
        },
        template:'#testA',
        methods:{
            get(data){ //这里面接收到的参数就是子组件发送的数据
                alert(data);
                this.msg = data;
            }
        },
        components:{
            'comB': {
                data(){
                    return {
                        b:'我是子组件的数据'
                    }
                },
                template:'#testB',
                methods:{
                    send(){
                        this.$emit('child-msg',this.b); //这里就是把子组件的b数据通过$emit()方法发送出去
                    }
                }
            }
        }
    }
    var vm=new Vue({
        el:'#box',
        components:{
            comA  //这里等价于 <==> 'comA':comA
        }
    });
</script>

3、兄弟组件之间获取数据

首先准备一个var Event = new Vue();，用Event身上的方法
其次在需要发送数据的组件上：Event.$emit(事件名称，数据)
再次在需要接收数据的组件上：
Event.$on(事件名称,function(data){ //data }.bind(this))

    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>


    <script>
        //准备一个空的实例对象
        var Event=new Vue();


        var A={
            template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是a数据'
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是b数据'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));

                //接收B组件的数据
                Event.$on('b-msg',function(a){
                    this.b=a;
                }.bind(this));
            }
        };


        window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };
    </script>