diff --git a/docs/changelog.md b/docs/changelog.md index 297b67dd..9c766e34 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -53,7 +53,7 @@ outline: 'deep' - 把一些原来没有特地注明是父组件的代码还是子组件的代码,进行了明确的标明,并优化了一部分示范代码 - 修正了之前一部分示范代码的 TypeScript 类型(之前有一些地方用了 any ,现在更新为明确的类型) - 优化了 [provide / inject](communication.md#provide-inject) 的相关内容,大幅度缩短了篇幅,但通过新的例子使其更容易看懂 -- 增加了 [Reative State](communication.md#reative-state-new) 创建一个小型的状态中心案例 +- 增加了 [Reactive State](communication.md#reactive-state-new) 创建一个小型的状态中心案例 - 对 [Vuex](communication.md#vuex-new) 添加了一些使用提示,建议使用 [Pinia](pinia.md) 代替 Vuex 作为状态管理库使用 ## 2022-11-06 diff --git a/docs/communication.md b/docs/communication.md index 42e9cc56..3a33d759 100644 --- a/docs/communication.md +++ b/docs/communication.md @@ -38,16 +38,16 @@ Father.vue 常用的方法有: -| 方案 | 父组件向子组件 | 子组件向父组件 | 对应章节传送门 | -| :--------------- | :------------- | :------------- | :----------------------------- | -| props / emits | props | emits | [点击查看](#props-emits) | -| v-model / emits | v-model | emits | [点击查看](#v-model-emits) | -| ref / emits | ref | emits | [点击查看](#ref-emits) | -| provide / inject | provide | inject | [点击查看](#provide-inject) | -| EventBus | emit / on | emit / on | [点击查看](#eventbus-new) | -| Reative State | - | - | [点击查看](#reative-state-new) | -| Vuex | - | - | [点击查看](#vuex-new) | -| Pinia | - | - | [点击查看](pinia.md) | +| 方案 | 父组件向子组件 | 子组件向父组件 | 对应章节传送门 | +| :--------------- | :------------- | :------------- | :------------------------------ | +| props / emits | props | emits | [点击查看](#props-emits) | +| v-model / emits | v-model | emits | [点击查看](#v-model-emits) | +| ref / emits | ref | emits | [点击查看](#ref-emits) | +| provide / inject | provide | inject | [点击查看](#provide-inject) | +| EventBus | emit / on | emit / on | [点击查看](#eventbus-new) | +| Reactive State | - | - | [点击查看](#reactive-state-new) | +| Vuex | - | - | [点击查看](#vuex-new) | +| Pinia | - | - | [点击查看](pinia.md) | 为了方便阅读,下面的父组件统一叫 Father.vue ,子组件统一叫 Child.vue 。 @@ -775,13 +775,13 @@ Grandfather.vue 因此需要更直接的通信方式来解决这种问题,这一 Part 就是讲一讲 C 和 A 之间的数据传递,常用的方法有: -| 方案 | 爷组件向孙组件 | 孙组件向爷组件 | 对应章节传送门 | -| :--------------- | :------------- | :------------- | :----------------------------- | -| provide / inject | provide | inject | [点击查看](#provide-inject) | -| EventBus | emit / on | emit / on | [点击查看](#eventbus-new) | -| Reative State | - | - | [点击查看](#reative-state-new) | -| Vuex | - | - | [点击查看](#vuex-new) | -| Pinia | - | - | [点击查看](pinia.md) | +| 方案 | 爷组件向孙组件 | 孙组件向爷组件 | 对应章节传送门 | +| :--------------- | :------------- | :------------- | :------------------------------ | +| provide / inject | provide | inject | [点击查看](#provide-inject) | +| EventBus | emit / on | emit / on | [点击查看](#eventbus-new) | +| Reactive State | - | - | [点击查看](#reactive-state-new) | +| Vuex | - | - | [点击查看](#vuex-new) | +| Pinia | - | - | [点击查看](pinia.md) | 因为上下级的关系的一致性,爷孙组件通信的方案也适用于 [父子组件通信](#父子组件通信) ,只需要把爷孙关系换成父子关系即可,为了方便阅读,下面的爷组件统一叫 Grandfather.vue,子组件统一叫 Grandson.vue 。 @@ -1131,12 +1131,12 @@ A.vue 常用的方法有: -| 方案 | 发起方 | 接收方 | 对应章节传送门 | -| :------------ | :----- | :----- | :----------------------------- | -| EventBus | emit | on | [点击查看](#eventbus-new) | -| Reative State | - | - | [点击查看](#reative-state-new) | -| Vuex | - | - | [点击查看](#vuex-new) | -| Pinia | - | - | [点击查看](pinia.md) | +| 方案 | 发起方 | 接收方 | 对应章节传送门 | +| :------------- | :----- | :----- | :------------------------------ | +| EventBus | emit | on | [点击查看](#eventbus-new) | +| Reactive State | - | - | [点击查看](#reactive-state-new) | +| Vuex | - | - | [点击查看](#vuex-new) | +| Pinia | - | - | [点击查看](pinia.md) | ## EventBus ~new @@ -1316,9 +1316,9 @@ export default { 这样在组件里就可以继续使用 `eventBus.$on` 、`eventBus.$emit` 等旧 API ,不会影响旧项目的升级使用。 -## Reative State ~new +## Reactive State ~new -在 Vue 3 里,使用响应式的 reative API 也可以实现一个小型的状态共享库,如果运用在一个简单的 H5 活动页面这样小需求里,完全可以满足使用。 +在 Vue 3 里,使用响应式的 reactive API 也可以实现一个小型的状态共享库,如果运用在一个简单的 H5 活动页面这样小需求里,完全可以满足使用。 ### 创建状态中心