Skip to content

Commit 8ec3f39

Browse files
author
Leo Y. Li
committed
#0: release v1.0.2
1 parent 64c8578 commit 8ec3f39

File tree

3 files changed

+13
-2
lines changed

3 files changed

+13
-2
lines changed

CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,20 @@ This project adheres to [Semantic Versioning](http://semver.org/).
55

66
---
77

8+
## [1.0.2] - 2019-04-26
9+
10+
## Documentation
11+
12+
- Update README.md for documenting caveats.
13+
14+
815
## [1.0.1] - 2019-04-26
916

1017
## Improvement
1118

1219
- Simplify implementation.
1320

21+
1422
## [1.0.0] - 2019-04-25
1523

1624
## Feature

README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,17 @@ Note: If the provided value is reactive, update this value "reactively" will als
4242
```vue
4343
<MyContext.Consumer v-slot="/* slot props: the value injected by the closed Provider */">
4444
/* you can access the value within the block */
45+
/* note: as a normal renderless component, this block have no access to computed properties */
4546
</MyContext.Consumer>
4647
```
4748

4849
The `Consumer` gives the access to the injected value from the closest `Provider`. Unlike React, where uses the CAAF (children as a function, also known as the "render prop") pattern to access the value, we uses `v-slot` inside the component block template to access the value (the so called "slot props"). If you uses single file component (SFC) or browsers supports ES6+ object spread operator, you can take the advantage of object destructuring (see more on [Vue's official documentation](https://vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props)).
4950

5051
It is worth to mention that due to the current implementation of Vue's scoped slot API, the slot props have to be an object, so it is recommended to give the value as an plan old javascript object (POJO). In the case of the provided value to be a primitive, it will be normalized as an object with a `value` key to get the passed value in `v-slot`, i.e. `{ value: /* your provided value */ }`.
5152

52-
Note. You might be tempted to mutate the injected value from the consumer block. This is generally a bad idea since it violate the principle of "[props down, event up](https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution)"; therefore, it is recommend to treat the slot props as read only properties. Under the hood, this reactivity behaviour of slot props is just a reflection of the `provide/inject` API.
53+
Note: You might be tempted to mutate the injected value from the consumer block. This is generally a bad idea since it violate the principle of "[props down, event up](https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution)"; therefore, it is recommend to treat the slot props as read only properties. Under the hood, this reactivity behaviour of slot props is just a reflection of the `provide/inject` API.
54+
55+
⚠️ **Caveat**: After chat with Vue's core team member @linusborg in Discord, the current constrain limits the template inside `Consumer` block have no access to the computed properties, but it can access to state value defined in `data` though. Please use it with caution!
5356

5457
## 💎 Example
5558

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-create-context",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "An abstracted util factory for creating scoped, declarative, and reactive context-components in Vue.",
55
"keywords": [
66
"vue"

0 commit comments

Comments
 (0)