Vue 如何实现组件间通信？（出一篇博文，加上case
vue 组件的通信分为两种方式：一个是父子组件之间的通信，一个是非父子组件之间的通信（bus）
父子组件
props / emits 这是Vue跨组件通信最常用，也是基础的一个方案。
父组件通过 prop 向子组件传值
父组件：
<template>
<div>
<h3>this is father</h3>
<!-- :传递到子组件的数据名="需要传递的数据" -->
<Child :shop="shopList" />
</div>
</template>
<script>
import Child from './child.vue';
export default {
name: 'Father',
components: {
Child
},
setup() {
const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
return {
shopList
};
}
};
</script>
子组件：
<template>
<div>
<p>this is child</p>
{{ shop }}
</div>
</template>
<script>
export default {
name: 'Child',
props: ['shop']
};
</script>
子组件通过 emit 出发父组件的时间执行
父组件
<template>
<div>
<h1>【case1】父传子</h1>
<p>父：好大儿，去帮为父买几个东西吧，东西通过 props 传给你了</p>
<!-- :传递到子组件的数据名="需要传递的数据" -->
<Child :shop="shopList" @giveClick="giveMoney" />
<p>父：给给给，一共 {{ number }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import Child from './child.vue';
export default {
name: 'Father',
components: {
Child
},
setup() {
const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
let number = ref();
const giveMoney = msg => {
console.log(msg);
number.value = msg;
console.log(number);
};
return {
shopList,
giveMoney,
number
};
}
};
</script>
子组件
<template>
<div>
<p>子：好的爸爸，这是我收到的东西：{{ shop }}</p>
<h1>【case2】子传父</h1>
<p>子：爸爸我没钱了</p>
<button @click="moneyClick">伸手要钱</button>
</div>
</template>
<script>
export default {
name: 'Child',
props: ['shop'],
setup(props, { emit }) {
const moneyClick = () => {
// 触发父组件中的方法，方法名要与父组件中的监听事件名一样
emit('giveClick', '1000');
};
return {
moneyClick
};
}
};
</script>
expose / ref
父组件获取子组件的属性或者调用子组件方法 defineExpose someMethod ref="comp"
attrs
包含父作用域里除 class 和 style 除外的非 props 属性集合
v-model
可以支持多个数据双向绑定
爷孙组件
provide / inject
适用于隔代通信，例如爷孙组件 provide / inject 为依赖注入
provide：可以让我们指定想要提供给后代组件的数据或
inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用
任意组件
Mitt
mitt 的用法：通过 on 方法添加事件，off 方法移除，clear 清空所有，emit
Vuex
Vuex 实现原理
概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，每个 Vuex 应用的核心就是 store，store 本质上就是一个容器，存储着应用中大部分的状态。
Vuex 的状态和属性
state：定义了应用状态的数据结构，可以在这里设置默认的初始状态，数据是响应式的；
getter：可以对 state 进行计算操作，通过 commit 提交方法，主要用来过滤一些数据，可以在多组件之间复用；
mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
module：当应用变得庞大复杂，拆分store为具体的module模块。
vuex 流程
第一步：在vue组件里面，通过 dispatch 来触发 actions 提交修改数据的操作。
第二步：然后再通过 actions 的 commit 来触发 mutations 来修改数据。
第三步：mutations 接收到 commit 的请求，就会自动通过 Mutate 来修改 state（数据中心里面的数据状态）里面的数据。
第四步：最后由 store 触发每一个调用它的组件的更新
应用场景
vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据
