From 087faa5a8e27794c9658981367ba335ba8521661 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Mon, 26 Sep 2016 14:23:01 -0300 Subject: [PATCH 1/4] vm.$slots documentation improvement --- src/api/index.md | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/api/index.md b/src/api/index.md index 495c8d5291..c3fc09470f 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -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. - **Example:** ```html -
- ... - -

named slot content1

-
single slot content
-

named slot content2

- - ... - + +

Introduction

+

Thank you very much

+
Everything which is not inside a named slot is available in the "default" slot
+ ``` ```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 From 8413653b533b0879f91bcdb0a25e59c266cb19a4 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Mon, 26 Sep 2016 14:36:49 -0300 Subject: [PATCH 2/4] vm.$slots doc fix: 'Render Function' instead of 'Render Functions' --- src/api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/index.md b/src/api/index.md index c3fc09470f..af9ff868fe 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -933,7 +933,7 @@ type: api ``` - **See also:** - - [Render Functions](/guide/render-function.html) + - [Render Function](/guide/render-function.html) ### vm.$refs From 33b45d2dd32e93ee79532c4c176015b1b5fec0a3 Mon Sep 17 00:00:00 2001 From: J Bruni Date: Mon, 26 Sep 2016 14:40:30 -0300 Subject: [PATCH 3/4] $vm.slots - improved initial sentence --- src/api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/index.md b/src/api/index.md index af9ff868fe..6f50c23eb9 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -902,7 +902,7 @@ type: api - **Details:** - 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. + An object that holds virtual nodes which contain 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. - **Example:** From 0152fa6fa9b6e76a1633642dc9163e82ebef2524 Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Tue, 27 Sep 2016 11:37:10 -0400 Subject: [PATCH 4/4] additional tweaks to vm. api entry --- src/api/index.md | 53 ++++++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/api/index.md b/src/api/index.md index 6f50c23eb9..3801d3b54b 100644 --- a/src/api/index.md +++ b/src/api/index.md @@ -902,38 +902,47 @@ type: api - **Details:** - An object that holds virtual nodes which contain 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. + Used to access content [distributed by slots](/guide/components.html#Content-Distribution-with-Slots). Each [named slot](/guide/components.html#Named-Slots) has its own corresponding property (e.g. the contents of `slot="foo"` will be found at `vm.$slots.foo`). The `default` property contains any nodes not included in a named slot. + + Accessing `vm.$slots` is most useful when writing a component with a [render function](/guide/render-function.html). - **Example:** ```html - -

Introduction

-

Thank you very much

-
Everything which is not inside a named slot is available in the "default" slot
- + +

+ About Me +

+ +

Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.

+ +

+ Copyright 2016 Evan You +

+ +

If I have some content down here, it will also be included in vm.$slots.default.

. + ``` + ```js - new Vue({ - ... - components: { - 'my-component': { - render: function (createElement) { - var slots = this.$slots - return createElement('div', { 'lang': 'en' }, [ - slots.intro, - slots.default, - slots.conclusion - ]) - } - } - }, - ... + Vue.component('blog-post', { + render: function (createElement) { + var header = this.$slots.header + var body = this.$slots.default + var footer = this.$slots.footer + return createElement('div', [ + createElement('header', header) + createElement('main', body) + createElement('footer', footer) + ]) + } }) ``` - **See also:** - - [Render Function](/guide/render-function.html) + - [`` Component](#slot) + - [Content Distribution with Slots](/guide/components.html#Content-Distribution-with-Slots) + - [Render Functions](/guide/render-function.html) ### vm.$refs