Vue.js组件通信的几种姿势

写在前面

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

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

在学习过程中，为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ，希望可以对其他想学习Vue源码的小伙伴有所帮助。

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

什么是Vue组件？

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

Vue组件间通信

父组件向子组件通信

方法一：props

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

父组件vue模板father.vue

<template>  <child :msg="message"></child></template><script>import child from './child.vue';export default {  components: {    child  },  data () {    return {      message: 'father message';    }  }}</script>

子组件vue模板child.vue

<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负责管理。