Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix reactive word #302

Merged
merged 1 commit into from
Apr 2, 2024
Merged

fix reactive word #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
50 changes: 25 additions & 25 deletions docs/communication.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 。

Expand Down Expand Up @@ -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 。

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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 活动页面这样小需求里，完全可以满足使用。

### 创建状态中心

Expand Down
Loading