Vue2 组件通信

// 父组件
<child-component :message="parentMessage"></child-component>

// 子组件
props: ['message']

// 子组件
this.$emit('custom-event', data)

// 父组件
<child-component @custom-event="handleEvent"></child-component>

// 访问父组件
this.$parent.parentMethod()

// 访问子组件
this.$children[0].childMethod()

// 父组件
<child-component ref="child"></child-component>

this.$refs.child.childMethod()

// event-bus.js
export const EventBus = new Vue()

// 组件 A
EventBus.$emit('event-name', data)

// 组件 B
EventBus.$on('event-name', (data) => {
  console.log(data)
})

// 销毁时移除监听
beforeDestroy() {
  EventBus.$off('event-name')
}

// 父组件
provide() {
  return {
    theme: 'dark'
  }
}

// 子孙组件
inject: ['theme']

// 父组件
<child-component :foo="foo" :bar="bar" @custom-event="handleEvent"></child-component>

// 子组件
<grand-child v-bind="$attrs" v-on="$listeners"></grand-child>

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)