8000 vm.$slots documentation improvement by jbruni · Pull Request #419 · vuejs/v2.vuejs.org · GitHub
[go: up one dir, main page]

Skip to content

vm.$slots documentation improvement #419

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.

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

Merged
merged 4 commits into from
Sep 27, 2016
Merged
Changes from 1 commit
Commits
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
Next Next commit
vm.$slots documentation improvement
  • Loading branch information
jbruni authored Sep 26, 2016
commit 087faa5a8e27794c9658981367ba335ba8521661
32 changes: 14 additions & 18 deletions src/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -902,42 +902,38 @@ type: api

- **Details:**

A hash of VNode children of component that should resolve with slot. VNode children resolved with Single Slot are stored as the `default` key. VNode children resolve with Named Slot are stored as the key that specified with `slot` attribute. those VNode children are stored an Array.
An object that holds virtual nodes containing parent contents used for content distribution (transclusion) inside [slots](/guide/components.html#Content-Distribution-with-Slots). The `default` property contains [single slot](/guide/components.html#Single-Slot) contents. Each [named slot](/guide/components.html#Named-Slots) has its own corresponding property, with the same name of the slot.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be because I'm not a native speaker, but I had to read the beginning twice. Maybe this is clearer:

"An object that holds virtual nodes which contain parent contents.."

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. Pushed a commit with the change.

But I've made a mistake in the commit message... should I create another PR? (With a single commit and correct message.) Or just let it go?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jbruni No need to create another PR - we're going to squash before we merge anyway. I have a couple other changes I'd like to make, but I'll just push up those commits on your branch and then merge. 😃 👍


- **Example:**

```html
<div id="slots-demo">
...
<my-component1>
<p slot="slot1">named slot content1</p>
<div>single slot content</div>
<p slot="slot2">named slot content2</div></p>
</my-component1>
...
</div>
<my-component>
<p slot="intro">Introduction</p>
<p slot="conclusion">Thank you very much</p>
<div>Everything which is not inside a named slot is available in the "default" slot</div>
</my-component>
```
```js
new Vue({
...
components: {
'my-component1': {
'my-component': {
render: function (createElement) {
console.log('single slot', this.$slots.default)
console.log('named slot: slot1', this.$slots.slots1)
console.log('named slot: slot2', this.$slots.slots1)
return this.$slots.default
var slots = this.$slots
return createElement('div', { 'lang': 'en' }, [
slots.intro,
slots.default,
slots.conclusion
])
}
}
},
...
}).$mount('#slots-demo')
})
```

- **See also:**
- [Render Functions](/guide/render-function.html)
- [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots)
- [slot](#slot)

### vm.$refs

Expand Down
0