Vue-组件传值：子传父和兄弟组件间常见的传值方式

前言

上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式，这篇介绍下常见的子传父和兄弟组件间的传值方式

目录

• 子组件向父组件传值
• 任意组件间的传值方式

正文

• 子组件向父组件传值

　　关键知识点：$emit

<div id="app">
        <child-div @a='handleTotal'></child-div>
        {{total}}
    </div>
    <script>
        //定义子组件
        Vue.component('child-div',{
            data(){
                return{
                    counter:0,
                }
            },
            template:'<span @click="handleCounter">点我加一{{counter}}</span>',
            methods:{
                //点击时候子组件加1，父组件加2
                handleCounter(){
                    this.counter ++
                    console.log('###########');
                    this.$emit('a',2)
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                total:0,
             },
            methods:{
                handleTotal(e){
                    console.log('@@@@@@@@@@@');
                    console.log(e);
                    this.total+=e
                }
            }
        })
    </script>

分析：定义子组件，并且定义子组件的点击事件，子组件通过点击事件触发$emit方法，向父组件弹出a方法，父组件通过监听这个a方法定义handleTotal方法，从而父组件接收到子组件传来的值，这样实现了子组件加一父组件加二效果。

这里遇到的一个坑：我用到的vue.js版本为https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js，在$emit()中注册的给父组件弹出的方法名必须全部用小写字母,只要方法名中存在大写字母就无法实现该效果，但是也不会报错。

• 任意组件的传值方式

　　关键知识点：事件总线EventBus

　　任意两个组件之间进行通讯，需要借助事件总线（一个空的vue实例）来触发事件和监听事件，从而实现组件之间的通信。包括父子，兄弟，以及跨级组件都可以使用。

 <div id="app">
        <data-a></data-a>
        <data-b></data-b>
        <data-c></data-c>
    </div>
    <template id="a"><div>
        <button @click='atoC'>A将数据传递给C</button>
        我的名字是：{{name}}</div>
    </template>
    <template id="b"><div>
        <button @click='btoC'>B将数据传递给C</button>
        我的年龄是：{{age}}</div>
    </template>
    <template id="c"><div>
        <span>我接受到的参数是</span>
        {{name}}========={{age}}</div>
    </template>
    <script>

        var Event = new Vue();
        var a = Vue.component(
            'data-a', {
            template: '#a',
            data() {
                return {
                    name: 'Tom'
                }
            },
            methods: {
                atoC() {
                    // console.log('aaaaaaaaaaaaaaaaaaaa');
                    Event.$emit('data-a', this.name)
                    // console.log('atoc success');
                }
            }
        }
        )
        var b = Vue.component(
            'data-b', {
            template: '#b',
            data() {
                return {
                    age: 20
                }
            },
            methods: {
                btoC() {
                    Event.$emit('data-b', this.age)
                }
            }
        }
        )
        var c = Vue.component(
            'data-c', {
            template: '#c',
            data() {
                return {
                    name: 'name',
                    age: 'age'
                }
            },
            mounted() {
                // console.log('@@@@@@@@@@@@@@');
                Event.$on(
                    'data-a', name => {
                        this.name = name;//箭头函数不产生新的this,这里如果不用箭头函数，this指代Event
                    }
                )
                Event.$on(
                    'data-b', age => {
                        this.age = age;
                    }
                )
            }
        }
        )
        new Vue({
            el:'#app',
            components:{
                'data-a':a,
                'data-b':b,
                'data-c':c
            }
        })

分析：定义abc三个组件，注册一个全局的事件总线var Event = new Vue();然后a向c传值的时候通过Event调用$emit（事件名，数据）发送数据，c组件通过Event.$on(事件名，data=>{})接收数据。

就相当于注册一个事件总线存起来，等触发事件时再调用。定义一个类去处理事件，并挂载到vue实例的this上即可注册和触发事件，也可以扩展一些事件管理。