聊聊Vue.js组件间通讯的几种姿式

时间 2019-11-09

标签聊聊 vue.js vue 组件通讯几种栏目 JavaScript 繁體版

原文原文链接

写在前面

由于对Vue.js很感兴趣，并且平时工做的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并作了总结与输出。javascript

文章的原地址：https://github.com/answershuto/learnVue。html

在学习过程当中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，但愿能够对其余想学习Vue源码的小伙伴有所帮助。vue

可能会有理解存在误差的地方，欢迎提issue指出，共同窗习，共同进步。java

什么是Vue组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些状况下，组件也能够是原生 HTML 元素的形式，以 is 特性扩展。git

github

Vue组件间通讯

父组件向子组件通讯

方法一：props

使用props，父组件可使用props向子组件传递数据。vuex

父组件vue模板father.vueapi

<template>
    <child :msg="message"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

子组件vue模板child.vueide

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

学习

方法二使用$children

使用$children能够在父组件中访问子组件。

子组件向父组件通讯

方法一:使用vue事件

父组件向子组件传递事件方法，子组件经过$emit触发事件，回调给父组件。

父组件vue模板father.vue

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from './child.vue';

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子组件vue模板child.vue

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>

方法二：经过修改父组件传递的props来修改父组件数据

这种方法只能在父组件传递一个引用变量时可使用，字面变量没法达到相应效果。由于饮用变量最终不管是父组件中的数据仍是子组件获得的props中的数据都是指向同一块内存地址，因此修改了子组件中props的数据即修改了父组件的数据。

可是并不推荐这么作，并不建议直接修改props的值，若是数据是用于显示修改的，在实际开发中我常常会将其放入data中，在须要回传给父组件的时候再用事件回传数据。这样作保持了组件独立以及解耦，不会由于使用同一份数据而致使数据流异常混乱，只经过特定的接口传递数据来达到修改数据的目的，而内部数据状态由专门的data负责管理。

方法三：使用$parent

使用$parent能够访问父组件的数据。

非父子组件、兄弟组件之间的数据传递

非父子组件通讯，Vue官方推荐使用一个Vue实例做为中央事件总线。

Vue内部有一个事件机制，能够参考源码。

$on方法用来监听一个事件。

$emit用来触发一个事件。

/*新建一个Vue实例做为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

多层级父子组件通讯：

在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件（或父组件）广播（或派发），当子组件（或父组件）上监听了事件并返回true的时候会向爷孙级组件继续广播（或派发）事件。可是这个方法在Vue2.0里面已经被移除了。

以前在学习饿了么的开源组件库element的时候发现他们从新实现了broadcast以及dispatch的方法，以mixin的方式引入，具体能够参考《说说element组件库broadcast与dispatch》。可是跟Vue1.0的两个方法实现有略微的不一样。这两个方法实现了向子孙组件事件广播以及向多层级父组件事件派发的功能。可是并不是广义上的事件广播，它须要指定一个commentName进行向指定组件名组件定向广播（派发）事件。

其实这两个方法内部实现仍是用到的仍是$parent以及$children，用以遍历子节点或是逐级向上查询父节点，访问到指定组件名的时候，调用$emit触发指定事件。