Skip to content

Commit 1b0fc6d

Browse files
chrisvfritzyyx990803
authored andcommitted
update language in render functions guide
1 parent 270866f commit 1b0fc6d

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

src/guide/render-function.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ createElement(
9999
'div',
100100

101101
// {Object}
102-
// An options object corresponding to the attributes
102+
// An data object corresponding to the attributes
103103
// you would use in a template. Optional.
104104
{
105105
// ... (see more detail below)
@@ -123,7 +123,7 @@ createElement(
123123
)
124124
```
125125

126-
### The Options Object In-Depth
126+
### The Data Object In-Depth
127127

128128
``` js
129129
{
@@ -305,8 +305,8 @@ In cases like this, we can mark components as `functional`, which means that the
305305
Vue.component('my-component', {
306306
functional: true,
307307
// To compensate for the lack of an instance,
308-
// we are now provided a 2nd options argument.
309-
render: function (createElement, options) {
308+
// we are now provided a 2nd context argument.
309+
render: function (createElement, context) {
310310
// ...
311311
},
312312
// Props are optional
@@ -316,15 +316,15 @@ Vue.component('my-component', {
316316
})
317317
```
318318

319-
Everything the component needs is passed through `options`, which is an object containing:
319+
Everything the component needs is passed through `context`, which is an object containing:
320320

321321
- `props`: An object of the provided props
322322
- `children`: A function returning the children
323323
- `slots`: A function returning a slots object
324324
- `data`: The entire data object passed to the component
325325
- `parent`: A reference to the parent component
326326

327-
After adding `functional: true`, updating the render function of our anchored heading component would simply require adding the `options` argument, updating `this.$slots.default` to `options.children`, then updating `this.level` to `options.props.level`.
327+
After adding `functional: true`, updating the render function of our anchored heading component would simply require adding the `context` argument, updating `this.$slots.default` to `context.children`, then updating `this.level` to `context.props.level`.
328328

329329
Since functional components are just functions, they're much cheaper to render. They're also very useful as wrapper components. For example, when you need to:
330330

@@ -341,21 +341,21 @@ var UnorderedList = { /* ... */ }
341341

342342
Vue.component('smart-list', {
343343
functional: true,
344-
render: function (createElement, options) {
344+
render: function (createElement, context) {
345345
function appropriateListComponent {
346-
var items = options.props.items
346+
var items = context.props.items
347347

348348
if (items.length === 0) return EmptyList
349349
if (typeof items[0] === 'object') return TableList
350-
if (options.props.isOrdered) return OrderedList
350+
if (context.props.isOrdered) return OrderedList
351351

352352
return UnorderedList
353353
}
354354

355355
return createElement(
356356
appropriateListComponent(),
357-
options.data,
358-
options.children
357+
context.data,
358+
context.children
359359
)
360360
},
361361
props: {
@@ -372,7 +372,7 @@ Vue.component('smart-list', {
372372

373373
### `keep-alive`
374374

375-
Instead of being passed through the options object, the `keep-alive` attribute actually compiles to a higher-order component. So this template:
375+
Instead of being passed through the data object, the `keep-alive` attribute actually compiles to a higher-order component. So this template:
376376

377377
``` html
378378
<my-component keep-alive></my-component>

0 commit comments

Comments
 (0)