Skip to content

Commit 9d7afda

Browse files
author
User
committed
added Instance Properties APIs
1 parent 6505478 commit 9d7afda

File tree

3 files changed

+227
-11
lines changed

3 files changed

+227
-11
lines changed

‎API.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const O_LH = require('./apis/optionslifecyclehooks')
66
const O_A = require('./apis/optionsassets')
77
const O_C = require('./apis/optionscomposition')
88
const O_M = require('./apis/optionsmisc')
9+
const I_P = require('./apis/instanceproperties')
910

1011
const GlobalConfig = [
1112
G_C.SILENT,
@@ -86,6 +87,22 @@ const OptionsMisc = [
8687

8788
]
8889

90+
const InstanceProperties = [
91+
I_P.VM_$DATA,
92+
I_P.VM_$PROPS,
93+
I_P.VM_$EL,
94+
I_P.VM_$OPTIONS,
95+
I_P.VM_$PARENT,
96+
I_P.VM_$ROOT,
97+
I_P.VM_$CHILDREN,
98+
I_P.VM_$SLOTS,
99+
I_P.VM_$SCOPED_SLOTS,
100+
I_P.VM_$REFS,
101+
I_P.VM_$IS_SERVER,
102+
I_P.VM_$ATTRS,
103+
I_P.VM_$LISTENERS
104+
]
105+
89106

90107
module.exports = {
91108
GlobalConfig,
@@ -95,5 +112,6 @@ module.exports = {
95112
OptionsLifecycleHooks,
96113
OptionsAssets,
97114
OptionsComposition,
98-
OptionsMisc
115+
OptionsMisc,
116+
InstanceProperties
99117
}

‎apis/instanceproperties.js

Lines changed: 127 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,133 @@ const VM_$EL = {
2828
read: 'Read only',
2929
details: `The root DOM element that the Vue instance is managing.`
3030
}
31-
const VM_$OPTIONS = {}
32-
const VM_$PARENT = {}
33-
const VM_$ROOT = {}
34-
const VM_$CHILDREN = {}
35-
const VM_$SLOTS = {}
36-
const VM_$SCOPED_SLOTS = {}
37-
const VM_$REFS = {}
38-
const VM_$IS_SERVER = {}
39-
const VM_$ATTRS = {}
40-
const VM_$LISTENERS = {}
31+
const VM_$OPTIONS = {
32+
category: cat,
33+
name: 'vm.$options',
34+
type: 'Object',
35+
read: 'Read only',
36+
details: `The instantiation options used for the current Vue instance.
37+
This is useful when you want to include custom properties in the options:
38+
${colorArgs('new')} Vue({
39+
customOption: ${chalk.green("'foo'")},
40+
created: ${chalk.blue('function')} () {
41+
${chalk.green('console')}.log(${colorArgs('this')}.$options.customOption) ${colorComment(`// -> 'foo'`)}
42+
}
43+
})`
44+
}
45+
const VM_$PARENT = {
46+
category: cat,
47+
name: `vm.$parent`,
48+
type: `Vue instance`,
49+
read: 'Read only',
50+
details: `The parent instance, if the current instance has one.`
51+
}
52+
const VM_$ROOT = {
53+
category: cat,
54+
name: `vm.$root`,
55+
type: `Vue instance`,
56+
read: `Read only`,
57+
details: `The root Vue instance of the current component tree.
58+
If the current instance has no parents this value will be itself.`
59+
}
60+
const VM_$CHILDREN = {
61+
category: cat,
62+
name: `vm.$children`,
63+
type: `Array<Vue instance>`,
64+
read: `Read only`,
65+
details: `The direct child components of the current instance.
66+
${chalk.bold(`Note there’s no order guarantee for ${colorArgs('$children')}, and it is not reactive.`)}
67+
If you find yourself trying to use ${colorArgs('$children')} for data binding, consider
68+
using an Array and ${colorArgs('v-for')} to generate child components, and use the Array
69+
as the source of truth.`
70+
}
71+
const VM_$SLOTS = {
72+
category: cat,
73+
name: `vm.$slots`,
74+
type: `{ [name: string]: ?Array<VNode> }`,
75+
read: `Read only`,
76+
details: `Used to programmatically access content ${chalk.green(`distributed by slots`)}.
77+
Each ${chalk.green('named slot')} has its own corresponding
78+
property (e.g. the contents of ${colorArgs(`slot="foo"`)} will be found at
79+
${colorArgs(`vm.$slots.foo`)}. The ${colorArgs(`default`)} property contains any nodes
80+
not included in a named slot. Accessing ${colorArgs(`vm.$slots`)} is most
81+
useful when writing a component with a ${chalk.green(`render function`)}.`,
82+
example: `
83+
${colorComment('// html')}
84+
${chalk.blue(`<blog-post>`)}
85+
${chalk.blue(`<h1 slot=${chalk.green('"header"')}>`)}
86+
About Me
87+
${chalk.blue(`</h1>`)}
88+
${chalk.blue(`<p>`)}Here's some page content, which will be included in vm.$slots.default,
89+
because it's not inside a named slot. ${chalk.blue(`</p>`)}
90+
${chalk.blue(`<p slot=${chalk.green('"footer"')}>`)}
91+
Copyright 2016 Evan You
92+
${chalk.blue(`</p>`)}
93+
${chalk.blue(`<p>`)}If I have some content down here, it will
94+
also be included in vm.$slots.default.${chalk.blue(`</p>`)}.
95+
${chalk.blue(`</blog-post>`)}
96+
${colorComment('// JS')}
97+
Vue.component(${chalk.green(`'blog-post'`)}, {
98+
render: ${chalk.blue(`function`)} (createElement) {
99+
${colorArgs(`var`)} header = ${colorArgs(`this`)}.$slots.header
100+
${colorArgs(`var`)} body = ${colorArgs(`this`)}.$slots.default
101+
${colorArgs(`var`)} footer = ${colorArgs(`this`)}.$slots.footer
102+
return createElement(${chalk.green(`'div'`)}, [
103+
createElement(${chalk.green(`'header'`)}, header),
104+
createElement(${chalk.green(`'main'`)}, body),
105+
createElement(${chalk.green(`'footer'`)}, footer)
106+
])
107+
}
108+
})
109+
`
110+
}
111+
const VM_$SCOPED_SLOTS = {
112+
category: cat,
113+
name: `vm.$scopedSlots`,
114+
type: `{ [name: string]: props => VNode | Array<VNode> }`,
115+
read: `Read only`,
116+
details: `Used to programmatically access ${chalk.green(`scoped slots`)}.
117+
For each slot, including the ${colorArgs(`default`)} one, the object
118+
contains a corresponding function that returns VNodes.
119+
Accessing ${colorArgs(`vm.$scopedSlots`)} is most useful when writing
120+
a component with a ${chalk.green(`render function`)}.`
121+
}
122+
const VM_$REFS = {
123+
category: cat,
124+
name: `vm.$refs`,
125+
type: `Object`,
126+
read: `Read only`,
127+
details: `An object that holds child components that have ${colorArgs('ref')} registered.`
128+
}
129+
const VM_$IS_SERVER = {
130+
category: cat,
131+
name: `vm.$isServer`,
132+
type: `boolean`,
133+
read: `Read only`,
134+
details: `Whether the current Vue instance is running on the server.`
135+
}
136+
const VM_$ATTRS = {
137+
category: cat,
138+
name: `vm.$attrs`,
139+
type: `{ [key: string]: string }`,
140+
read: `Read only`,
141+
details: `Contains parent-scope attribute bindings that are not
142+
recognized (and extracted) as props. When a component doesn’t
143+
have any declared props, this essentially contains all
144+
parent-scope bindings except for ${colorArgs(`class`)} and ${colorArgs(`style`)},
145+
and can be passed down to an inner component via
146+
${colorArgs(`v-bind="$attrs"`)} - useful when creating higher-order components.`
147+
}
148+
const VM_$LISTENERS = {
149+
category: cat,
150+
name: `vm.$listeners`,
151+
type: `{ [key: string]: Function | Array<Function> }`,
152+
read: `Read only`,
153+
details: `Contains parent-scope ${colorArgs(`v-on`)} event listeners
154+
(without ${colorArgs(`.native`)} modifiers). This can be passed down to
155+
an inner component via ${colorArgs(`v-on="$listeners"`)} - useful when
156+
creating higher-order components.`
157+
}
41158

42159

43160
module.exports = {

‎vue-help.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const olh = api.OptionsLifecycleHooks
1111
const oa = api.OptionsAssets
1212
const oc = api.OptionsComposition
1313
const om = api.OptionsMisc
14+
const ip = api.InstanceProperties
1415

1516
V.delimiter('vue-help$').show()
1617

@@ -358,4 +359,84 @@ V.command('comments', 'Options/Misc: #comments').action(function(args, callback)
358359
const w = om[5]
359360
this.log(O.logOptions(w))
360361
callback()
362+
})
363+
364+
// Instance Properties
365+
366+
V.command('vm.$data', 'Instance Properties: #vm.$data').action(function(args, callback){
367+
const w = ip[0]
368+
this.log(O.logOptions(w))
369+
callback()
370+
})
371+
372+
V.command('vm.$props', 'Instance Properties: #vm.$props').action(function(args, callback){
373+
const w = ip[1]
374+
this.log(O.logOptions(w))
375+
callback()
376+
})
377+
378+
V.command('vm.$el', 'Instance Properties: #vm.$el').action(function(args, callback){
379+
const w = ip[2]
380+
this.log(O.logOptions(w))
381+
callback()
382+
})
383+
384+
V.command('vm.$options', 'Instance Properties: #vm.$options').action(function(args, callback){
385+
const w = ip[3]
386+
this.log(O.logOptions(w))
387+
callback()
388+
})
389+
390+
V.command('vm.$parent', 'Instance Properties: #vm.$parent').action(function(args, callback){
391+
const w = ip[4]
392+
this.log(O.logOptions(w))
393+
callback()
394+
})
395+
396+
V.command('vm.$root', 'Instance Properties: #vm.$root').action(function(args, callback){
397+
const w = ip[5]
398+
this.log(O.logOptions(w))
399+
callback()
400+
})
401+
402+
V.command('vm.$children', 'Instance Properties: #vm.$children').action(function(args, callback){
403+
const w = ip[6]
404+
this.log(O.logOptions(w))
405+
callback()
406+
})
407+
408+
V.command('vm.$slots', 'Instance Properties: #vm.$slots').action(function(args, callback){
409+
const w = ip[7]
410+
this.log(O.logOptions(w))
411+
callback()
412+
})
413+
414+
V.command('vm.$scopedSlots', 'Instance Properties: #vm.$scopedSlots').action(function(args, callback){
415+
const w = ip[8]
416+
this.log(O.logOptions(w))
417+
callback()
418+
})
419+
420+
V.command('vm.$refs', 'Instance Properties: #vm.$refs').action(function(args, callback){
421+
const w = ip[9]
422+
this.log(O.logOptions(w))
423+
callback()
424+
})
425+
426+
V.command('vm.$isServer', 'Instance Properties: #vm.$isServer').action(function(args, callback){
427+
const w = ip[10]
428+
this.log(O.logOptions(w))
429+
callback()
430+
})
431+
432+
V.command('vm.$attrs', 'Instance Properties: #vm.$attrs').action(function(args, callback){
433+
const w = ip[11]
434+
this.log(O.logOptions(w))
435+
callback()
436+
})
437+
438+
V.command('vm.$listeners', 'Instance Properties: #vm.$listeners').action(function(args, callback){
439+
const w = ip[12]
440+
this.log(O.logOptions(w))
441+
callback()
361442
})

0 commit comments

Comments
 (0)