Skip to content

Commit e195a59

Browse files
kazuponchrisvfritz
authored andcommitted
add $slots property to API docs (#415)
* add $slots property to API docs * fix $slots reference
1 parent 46acb51 commit e195a59

File tree

2 files changed

+46
-1
lines changed

2 files changed

+46
-1
lines changed

src/api/index.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -894,6 +894,51 @@ type: api
894894

895895
The direct child components of the current instance. **Note there's no order guarantee for `$children`, and it is not reactive.** If you find yourself trying to use `$children` for data binding, consider using an Array and `v-for` to generate child components, and use the Array as the source of truth.
896896

897+
### vm.$slots
898+
899+
- **Type:** `Object`
900+
901+
- **Read only**
902+
903+
- **Details:**
904+
905+
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.
906+
907+
- **Example:**
908+
909+
```html
910+
<div id="slots-demo">
911+
...
912+
<my-component1>
913+
<p slot="slot1">named slot content1</p>
914+
<div>single slot content</div>
915+
<p slot="slot2">named slot content2</div></p>
916+
</my-component1>
917+
...
918+
</div>
919+
```
920+
```js
921+
new Vue({
922+
...
923+
components: {
924+
'my-component1': {
925+
render: function (createElement) {
926+
console.log('single slot', this.$slots.default)
927+
console.log('named slot: slot1', this.$slots.slots1)
928+
console.log('named slot: slot2', this.$slots.slots1)
929+
return this.$slots.default
930+
}
931+
}
932+
},
933+
...
934+
}).$mount('#slots-demo')
935+
```
936+
937+
- **See also:**
938+
- [Render Functions](/guide/render-function.html)
939+
- [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots)
940+
- [slot](#slot)
941+
897942
### vm.$refs
898943

899944
- **Type:** `Object`

src/guide/render-function.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Vue.component('anchored-heading', {
8484
})
8585
```
8686

87-
Much simpler! Sort of. The code is shorter, but also requires greater familiarity with Vue instance properties. In this case, you have to know that when you pass children without a `slot` attribute into a component, like the `Hello world!` inside of `anchored-heading`, those children are stored on the component instance at `$slots.default`. If you haven't already, **it's recommended to read through the [instance properties API](/api/#Instance-Properties) before diving into render functions.**
87+
Much simpler! Sort of. The code is shorter, but also requires greater familiarity with Vue instance properties. In this case, you have to know that when you pass children without a `slot` attribute into a component, like the `Hello world!` inside of `anchored-heading`, those children are stored on the component instance at `$slots.default`. If you haven't already, **it's recommended to read through the [instance properties API](/api/#vm-slots) before diving into render functions.**
8888

8989
## `createElement` Arguments
9090

0 commit comments

Comments
 (0)