框架小白白白白的进阶之路 --- Vue（五）组件之间的通信

组件通信

父组件与子组件之间的通信
父子组件:组建中定义组件,形成组件嵌套的时候，就是我们所说的父子组件了。

子组件调用父组件的数据：
子组件中使用：m与props获取父组件中的数据的引用 发生了数据的传递

<div id="box">
        <aaa></aaa>
    </div>

    <template id="aaa">
      <div>
          <h1>11111</h1>
          <bbb :m="msg"></bbb>  <!--将父组件中的 msg属性与子组件数据中的 props中的m进行绑定-->
      </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            props:['m'],
                            template:'<h3>我是bbb组件->{{m}}</h3>'
                        }
                    }
                }
            }
        });
    </script>

子组件中使用$parent直接调用父组件中的数据没有数据的传递

<div id="count">
    父组件中的msg: {{ msg }}
        <child1 ref='c1'></child1>
    <child2 ref='c2'></child2>
    </div>
<template id="child1">
  <div>
    {{ msg }}
    <button @click="showpmsg">
      显示父组件msg
    </button>
  </div>
</template>
<template id="child2">
  <div>
    {{ msg }}
  </div>
</template>
<script>
    Vue.component('child1', {
      template: '#child1',
      data () {
        return {
          msg: '这是子组件1的信息'
        }
      },
      methods: {
        showpmsg () {
                alert(this.$parent.msg)
        }
      }
    })
    Vue.component('child2', {
      template: '#child2',
      data () {
        return {
          msg: '这是子组件2的信息'
        }
      }
    })
    new Vue({
      el: '#count',
      data: {
        msg: 'hello parent'
      }
    })
</script>

父组件调用子组件中的数据
子组件使用$emit方法发送数据，父组件进行接收需要有事件触发 且发生数据的传递

<div id="box">
        <aaa></aaa>
    </div>
    <template id="aaa">
      <div>
         <span>我是父级 -> {{msg}}</span> <!-- 第五步：通过调用接收子组件值的数据来调用子组件数据 -->
        <bbb @child-msg="get"></bbb> <!-- 第三步:父组件中通过@子组件中$emit中的命名,将数据作为参数传递给get方法 -->
      </div>
    </template>
    <template id="bbb">
      <div>
        <h3>子组件-</h3>
        <input type="button" value="send" @click="send">   <!-- 第一步：子组件中触发点击事件，调用send -->
        </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:111,
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){
                            this.msg=msg; //第四步：get方法中，将传递进来的参数（要调用的子组件的值）赋值给自己的数据（this.msg）
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子组件的数据'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg',this.a); //第二步：send中，调用this.$emit('命名','数据')，将数据命名并发送给父组件
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>

使用$children 数组直接调用子组件的数据不发生数据的传递

<div id="count">
    <button @click="showmsg">
      显示两个组件的信息
    </button>
        <child1></child1>
    <child2></child2>
    </div>
<template id="child1">
  <div>
    {{ msg }}
  </div>
</template>
<template id="child2">
  <div>
    {{ msg }}
  </div>
</template>
<script>
    Vue.component('child1', {
      template: '#child1',
      data () {
        return {
          msg: '这是子组件1的信息'
        }
      }
    })
    Vue.component('child2', {
      template: '#child2',
      data () {
        return {
          msg: '这是子组件2的信息'
        }
      }
    })
    new Vue({
      el: '#count',
      data: {

      },
      methods: {
        showmsg () {
            for(var i = 0; i < this.$children.length; i++) {
            alert(this.$children[i].msg)
          }
        }
      }
    })
</script>

有时候组件过多的话，就很记清各个组件的顺序与位置，所以通过给子组件一个索引ID,然后通过这个ID对数据进行调用

<div id="count">
        <button @click="showmsg">
      显示两个组件的信息
    </button>
        <child1 ref='c1'></child1>
    <child2 ref='c2'></child2>
    </div>
<template id="child1">
  <div>
    {{ msg }}
  </div>
</template>
<template id="child2">
  <div>
    {{ msg }}
  </div>
</template>
<script>
    Vue.component('child1', {
      template: '#child1',
      data () {
        return {
          msg: '这是子组件1的信息'
        }
      }
    })
    Vue.component('child2', {
      template: '#child2',
      data () {
        return {
          msg: '这是子组件2的信息'
        }
      }
    })
    new Vue({
      el: '#count',
      data: {

      },
      methods: {
        showmsg () {
            alert(this.$refs.c1.msg)
          alert(this.$refs.c2.msg)
        }
      }
    })
</script>

兄弟组件之间的通信

1. 创建一个Vue对象（Event）
2. 将a组件的数据传到c中a中定义触发事件，触发emit方法 Event. $emit('a-msg',this.a)
3. 在组件c中的mounted（钩子函数）中使用$on接收a发送到Event中的数据

mounted(){//钩子函数  生命周期函数
            var _this = this;
             //接收A组件的数据
            Event.$on('a-msg',function(a){
                 _this.a=a;
            });
 }

使用$emit发送，使用 $on接收
使用（新建的空的Vue对象）Event. $emit()发送数据,使用Event. $on()接收数据（相当于使用emit把数据存储到Event对象中，然后使用on取出来使用）

<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;
                });

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

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