组件通信

父子组件通信

主流推荐的

Props Down, Events Up
父组件传递数据到子组件，子组件通过自定义事件通知父组件

---

v-model 语法糖 实现数据双向绑定. 本质上也是 Props Down, Events Up vue 2 的时候还有个.sync实现多个值的双向绑定，vue3 被移除了

`v-bind:propName.sync="data"` 也是一个语法糖，它等价于：
`v-bind:propName="data" @update:propName="data = $event"`

vue3 中 v-model:foo="bar" 已经完美替代了 v-bind:foo.sync="bar" 的功能

---

ref 模板引用 直接拿到子组件实例，访问子组件的属性和方法。

也是一种说法

style和class
style和class会合并到子组件的根元素中

<ChildComponent class='active' style="color: red">

attribute元素属性
子组件默认会继承父组件传过来的所有属性，即便在子组件中没有声明为 props ，也可以在attrs 中拿到所有父组件传递的属性。

---

$parent,$children 直接获取父组件或子组件的实例，直接操作实例。 vue3 中已不再推荐

---

插槽和作用域插槽 插槽的主要目的是实现组件内容分发和复用。普通插槽允许父组件在子组件内部插入内容，这些内容可以访问父组件自身的数据和方法（父 -> 子）。作用域插槽允许子组件将其内部的数据暴露给父组件，供父组件定义插槽内容时使用（子 -> 父）。

---

跨组件通信

Provide 和 Inject

实现祖先与后代的深层次组件通信，实现整体主题、样式的配置以及一些插件开发。

// 在父组件中 , provide 一个普通值，响应式对象或一个方法
import { provide } from 'vue'

const appName = ref('My Awesome App');
provide('appName', appName);

const updateTheme = (newColor) => {};
provide('updateTheme', updateTheme);

// 子组件中
import { inject } from 'vue'

const appName = inject('appName')
const updateTheme = inject('updateTheme')

const changeTheme = () => {
  if (updateTheme) {
    updateTheme('dark');
  }
};

router

比如一个组件改变了路由，另有一个组件监听该路由并变化，这俩组件之间就是基于 router 进行了通信。

vuex

大型的数据仓库

轻量的 store 模式

适用于中小型的数据仓库，比如我经常写的 ezStore

export default {
    store: new Map(),
    set(key, val) {
        store.set(key, val)
    },
    get(ket){
        store.get(key)
    }
}

EventBus 发布订阅模式/观察者模式

通过一个中间总线来管控事件的派发和监听。