Skip to content

Commit 9e46fd6

Browse files
author
User
committed
added Options/Composition APIs
1 parent 0044830 commit 9e46fd6

File tree

3 files changed

+162
-5
lines changed

3 files changed

+162
-5
lines changed

‎API.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const O_D = require('./apis/optionsdata')
44
const O_DOM = require('./apis/optionsdom')
55
const O_LH = require('./apis/optionslifecyclehooks')
66
const O_A = require('./apis/optionsassets')
7+
const O_C = require('./apis/optionscomposition')
78

89
const GlobalConfig = [
910
G_C.SILENT,
@@ -67,12 +68,20 @@ const OptionsAssets = [
6768
O_A.COMPONENTS
6869
]
6970

71+
const OptionsComposition = [
72+
O_C.PARENT,
73+
O_C.MIXINS,
74+
O_C.EXTENDS,
75+
O_C.PROVIDE_INJECT
76+
]
77+
7078

7179
module.exports = {
7280
GlobalConfig,
7381
GlobalAPI,
7482
OptionsData,
7583
OptionsDOM,
7684
OptionsLifecycleHooks,
77-
OptionsAssets
85+
OptionsAssets,
86+
OptionsComposition
7887
}

‎apis/optionscomposition.js

Lines changed: 132 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,137 @@ const colorArgs = custom.colorArgs
77

88
const cat = 'Options/Composition'
99

10-
const PARENT = {}
10+
const PARENT = {
11+
category: cat,
12+
name: 'parent',
13+
type: 'Vue instance',
14+
details: `Specify the parent instance for the instance to be created.
15+
Establishes a parent-child relationship between the two. The parent
16+
will be accessible as ${colorArgs('this.$parent')} for the child, and the child will
17+
be pushed into the parent’s ${colorArgs('$children')} array. Use ${colorArgs('$parent')} and ${colorArgs('$children')}
18+
sparingly - they mostly serve as an escape-hatch.
19+
Prefer using props and events for parent-child communication.
20+
21+
`
22+
}
1123

12-
const MIXINS = {}
24+
const MIXINS = {
25+
category: cat,
26+
name: 'mixins',
27+
type: 'Array<Object>',
28+
details: `The ${colorArgs('mixins')} option accepts an array of mixin objects. These mixin objects
29+
can contain instance options just like normal instance objects, and they will be merged
30+
against the eventual options using the same option merging logic in ${colorArgs('Vue.extend()')}
31+
. e.g. If your mixin contains a created hook and the component itself also has one,
32+
both functions will be called. Mixin hooks are called in the order they are provided,
33+
and called before the component’s own hooks.`,
34+
example: `
35+
${colorArgs('var')} mixin = {
36+
created: ${chalk.blue('function')} () { ${chalk.green('console')}.log(${colorPrimitive('1')} }
37+
}
38+
${colorArgs('var')} vm = ${colorArgs('new')} Vue({
39+
created: ${chalk.blue('function')} () { ${chalk.green('console')}.log(${colorPrimitive('2')} },
40+
mixins: [mixin]
41+
})
42+
${colorComment('// -> 1')}
43+
${colorComment('// -> 2')}
44+
`
45+
}
1346

14-
const
47+
const EXTENDS = {
48+
category: cat,
49+
name: 'extends',
50+
type: 'Object | Function',
51+
details: `Allows declaratively extending another component
52+
(could be either a plain options object or a constructor) without having to use ${colorArgs('Vue.extend')}
53+
This is primarily intended to make it easier to extend between single file components.
54+
This is similar to ${colorArgs('mixins')}, the difference being that the component’s own options takes
55+
higher priority than the source component being extended.`,
56+
example: `
57+
${colorArgs('var')} CompA = { ... }
58+
${colorComment('// extend CompA without having to call Vue.extend on either')}
59+
${colorArgs('var')} CompB = {
60+
extends: CompA,
61+
...
62+
}
63+
`
64+
}
65+
66+
const PROVIDE_INJECT = {
67+
category: cat,
68+
name: 'provide/inject',
69+
type: `provide: ${colorArgs('Object | () => Object')}\n
70+
inject: ${colorArgs('Array<string> | { [key: string]: string | Symbol}')}`,
71+
details: `${colorArgs('provide')} and ${colorArgs('inject')} are primarily provided for advanced plugin / component
72+
library use cases. It is NOT recommended to use them in generic application code.\n
73+
This pair of options are used together to allow an ancestor component to serve as a
74+
dependency injector for its all descendants, regardless of how deep the component hierarchy
75+
is, as long as they are in the same parent chain. If you are familiar with React, this is very
76+
similar to React’s context feature. The ${colorArgs('provide')} option should be an object or a function that
77+
returns an object. This object contains the properties that are available for injection into
78+
its descendants. You can use ES2015 Symbols as keys in this object, but only in environments
79+
that natively support ${colorArgs('Symbol')} and ${colorArgs('Reflect.ownKeys')}. The inject options should be either an Array
80+
of strings or an object where the keys stand for the local binding name, and the value being the
81+
key (string or Symbol) to search for in available injections.\n
82+
Note: the ${colorArgs('provide')} and ${colorArgs('inject')} bindings are NOT reactive.
83+
This is intentional. However, if you pass down an observed object,
84+
properties on that object do remain reactive.
85+
`,
86+
example: `
87+
${colorArgs('var')} Provider = {
88+
provide: {
89+
foo: ${chalk.green("'bar'")}
90+
},
91+
${colorComment('// ...')}
92+
}
93+
${colorArgs('var')} Child = {
94+
inject: [${chalk.green("'foo'")}],
95+
created () {
96+
${chalk.green("console")}.log(${colorArgs('this')}.foo) ${colorComment('// -> "bar"')}
97+
}
98+
${colorComment('// ...')}
99+
}
100+
With ES2015 Symbols, function ${colorArgs('provide')} and object ${colorArgs('inject')}:
101+
${colorArgs('const')} s = ${chalk.green('Symbol')}()
102+
${colorArgs('const')} Provider = {
103+
provide () {
104+
${colorArgs('return')} {
105+
[s]: ${chalk.green("'foo'")}
106+
}
107+
}
108+
}
109+
${colorArgs('const')} Child = {
110+
inject: { s },
111+
${colorComment('// ...')}
112+
}
113+
The next 2 examples only work with Vue > 2.2.1. Below that version,
114+
injected values were resolved after the ${colorArgs('props')} and the ${colorArgs('data')} initialization.
115+
Using an injected value as the default for a prop:
116+
${colorArgs('const')} Child = {
117+
inject: [${chalk.green("'foo'")}],
118+
props: {
119+
bar: {
120+
${colorArgs('default')} () {
121+
${colorArgs('return this')}.foo
122+
}
123+
}
124+
}
125+
}
126+
Using an injected value as data entry:
127+
${colorArgs('const')} Child = {
128+
inject: [${chalk.green("'foo'")}],
129+
data () {
130+
${colorArgs('return')} {
131+
bar: ${colorArgs('this')}.foo
132+
}
133+
}
134+
}
135+
`
136+
}
137+
138+
module.exports = {
139+
PARENT,
140+
MIXINS,
141+
EXTENDS,
142+
PROVIDE_INJECT
143+
}

‎vue-help.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const od = api.OptionsData
99
const odom = api.OptionsDOM
1010
const olh = api.OptionsLifecycleHooks
1111
const oa = api.OptionsAssets
12+
const oc = api.OptionsComposition
1213

1314
V.delimiter('vue-help$').show()
1415

@@ -282,4 +283,22 @@ V.command('components', 'Options/Assets: #components').action(function(args, cal
282283
callback()
283284
})
284285

285-
// Options/Composition
286+
// Options/Composition
287+
288+
V.command('provide/inject', 'Options/Composition: #provide/inject').action(function(args, callback){
289+
const w = oc[3]
290+
this.log(O.logOptions(w))
291+
callback()
292+
})
293+
294+
V.command('provide', 'Options/Composition: #provide/inject').action(function(args, callback){
295+
const w = oc[3]
296+
this.log(O.logOptions(w))
297+
callback()
298+
})
299+
300+
V.command('inject', 'Options/Composition: #provide/inject').action(function(args, callback){
301+
const w = oc[3]
302+
this.log(O.logOptions(w))
303+
callback()
304+
})

0 commit comments

Comments
 (0)