Skip to content

Commit

Permalink
#0: release v1.0.2
Browse files Browse the repository at this point in the history
  • Loading branch information
Leo Y. Li committed Apr 27, 2019
1 parent 64c8578 commit 8ec3f39
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 2 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,20 @@ This project adheres to [Semantic Versioning](http://semver.org/).

---

## [1.0.2] - 2019-04-26

## Documentation

- Update README.md for documenting caveats.


## [1.0.1] - 2019-04-26

## Improvement

- Simplify implementation.


## [1.0.0] - 2019-04-25

## Feature
Expand Down
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,17 @@ Note: If the provided value is reactive, update this value "reactively" will als
```vue
<MyContext.Consumer v-slot="/* slot props: the value injected by the closed Provider */">
/* you can access the value within the block */
/* note: as a normal renderless component, this block have no access to computed properties */
</MyContext.Consumer>
```

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)).

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 */ }`.

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.
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.

⚠️ **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!

## 💎 Example

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-create-context",
"version": "1.0.1",
"version": "1.0.2",
"description": "An abstracted util factory for creating scoped, declarative, and reactive context-components in Vue.",
"keywords": [
"vue"
Expand Down

0 comments on commit 8ec3f39

Please sign in to comment.