vue.js父子组件通信的一些方法总结

说明

VUE组件间通信的方法很多种，也说明没有万能的一种解决方案。
记录一下各自的用法和特点。

1.父子通信 props

这是最基本的组件使用方式了，使用一个可展示多种内容的组件，就要留有一个能给他传入各种数据的入口。

用法：

<blog-post v-bind:title="post.title"></blog-post>
给组件传入不同的title。

特点：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。porp值无法修改。如果想要修改可使用两种变通：

• data:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• computed

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

2.直接访问root, parent, refs

this.$root.baz()

this.$parent.map

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput

特点：非响应式，渲染之后才可以实现。耦合度高

3.依赖注入

可将数据和方法导出提供下级

provide: function () {  ///父组件提供
  return {
    getMap: this.getMap
  }
}

///子组件或者子子组件注入
inject: ['getMap']

特点：类似大型props

4.vuex

这个不多说了，完整的系统和文档
https://vuex.vuejs.org/zh/