【Vue】组件通信方式

父子组件通信

props（父给子传递）

父组件传递

<Student name="Lily" />

子组件（Student.vue)

//简单声明接收：
props: ['name']
//或接收时进行类型限制
props: { name: String }

自定义事件（子给父传递）

// children.vue
this.$emit('add', good)

// Father.vue
<Student @add="callback"

emit传递的参数可以在callback中拿到

兄弟组件通信

先 子->父， 再 父-> 兄弟

全局事件总线

// brother1.vue
this.$bus.$on('triggerEvent', callback)

// brother2.vue
this.$bus.$emit('triggerEvent')

祖先与后代通信

provide/inject

// grand.vue
provide(key, value);

// grandson.vue
const value = inject(key)

Vuex

可以看作是管理各种数据的仓库
state: 存放共享变量
mutations：修改state中的共享变量的值
actions：一些异步操作如发送axios请求数据。

当组件内修改共享变量的值时，先dispatch actions，actions内发送请求数据，后将数据commit给mutations， mutations内将state中的变量修改为数据值。