Vue组件通信

组件_通信

prop

父组件传递数据给子组件时，可以通过特性传递。

推荐使用这种方式进行父->子通信。

$emit

子组件传递数据给父组件时，触发事件，从而抛出数据。

推荐使用这种方式进行子->父通信。

v-model

.sync

$attrs

祖先组件传递数据给子孙组件时，可以利用$attrs传递。

demo或小型项目可以使用$attrs进行数据传递，中大型项目不推荐，数据流会变的难于理解。

$attrs的真正目的是撰写基础组件，将非Prop特性赋予某些DOM元素。

$listeners

可以在子孙组件中执行祖先组件的函数，从而实现数据传递。

demo或小型项目可以使用$listeners进行数据传递，中大型项目不推荐，数据流会变的难于理解。

$listeners的真正目的是将所有的事件监听器指向这个组件的某个特定的子元素。

$root

可以在子组件中访问根实例的数据。

对于 demo 或非常小型的有少量组件的应用来说这是很方便的。中大型项目不适用。会使应用难于调试和理解。

$parent

可以在子组件中访问父实例的数据。

对于 demo 或非常小型的有少量组件的应用来说这是很方便的。中大型项目不适用。会使应用难于调试和理解。

$children

可以在父组件中访问子实例的数据。

对于 demo 或非常小型的有少量组件的应用来说这是很方便的。中大型项目不适用。会使应用难于调试和理解。

ref

可以在父组件中访问子实例的数据。

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的，适用于demo或小型项目。

provide & inject

祖先组件提供数据（provide），子孙组件按需注入（inject）。

会将组件的阻止方式，耦合在一起，从而使组件重构困难，难以维护。不推荐在中大型项目中使用，适用于一些小组件的编写。

eventBus(事件总线)

Vue.prototype.$bus = new Vue();

Vue.component('cmp-a', {
  data () {
    return {
      a: 'a'
    }
  },
  methods: {
    onClick () {
      this.$bus.$on('click', this.a)
    }
  },
  template: `
    <div>
      <button @click="onClick">点击</button>
    </div>
  `,
})

Vue.component('cmp-a', {
  mounted () {
    this.$bus.$on('click', data => {
      console.log(data);
    })
  },
  template: `
    <div>b</div>
  `,
})

非父子组件通信时，可以使用这种方法，但仅针对于小型项目。中大型项目使用时，会造成代码混乱不易维护。

Vuex

状态管理，中大型项目时强烈推荐使用此种方式，日后再学~