1 |
|
2 |
|
3 | import {
|
4 | tip,
|
5 | hasOwn,
|
6 | isDef,
|
7 | isUndef,
|
8 | hyphenate,
|
9 | formatComponentName
|
10 | } from 'core/util/index'
|
11 |
|
12 | export function extractPropsFromVNodeData (
|
13 | data: VNodeData,
|
14 | Ctor: Class<Component>,
|
15 | tag?: string
|
16 | ): ?Object {
|
17 |
|
18 |
|
19 |
|
20 | const propOptions = Ctor.options.props
|
21 | if (isUndef(propOptions)) {
|
22 | return
|
23 | }
|
24 | const res = {}
|
25 | const { attrs, props } = data
|
26 | if (isDef(attrs) || isDef(props)) {
|
27 | for (const key in propOptions) {
|
28 | const altKey = hyphenate(key)
|
29 | if (process.env.NODE_ENV !== 'production') {
|
30 | const keyInLowerCase = key.toLowerCase()
|
31 | if (
|
32 | key !== keyInLowerCase &&
|
33 | attrs && hasOwn(attrs, keyInLowerCase)
|
34 | ) {
|
35 | tip(
|
36 | `Prop "${keyInLowerCase}" is passed to component ` +
|
37 | `${formatComponentName(tag || Ctor)}, but the declared prop name is` +
|
38 | ` "${key}". ` +
|
39 | `Note that HTML attributes are case-insensitive and camelCased ` +
|
40 | `props need to use their kebab-case equivalents when using in-DOM ` +
|
41 | `templates. You should probably use "${altKey}" instead of "${key}".`
|
42 | )
|
43 | }
|
44 | }
|
45 | checkProp(res, props, key, altKey, true) ||
|
46 | checkProp(res, attrs, key, altKey, false)
|
47 | }
|
48 | }
|
49 | return res
|
50 | }
|
51 |
|
52 | function checkProp (
|
53 | res: Object,
|
54 | hash: ?Object,
|
55 | key: string,
|
56 | altKey: string,
|
57 | preserve: boolean
|
58 | ): boolean {
|
59 | if (isDef(hash)) {
|
60 | if (hasOwn(hash, key)) {
|
61 | res[key] = hash[key]
|
62 | if (!preserve) {
|
63 | delete hash[key]
|
64 | }
|
65 | return true
|
66 | } else if (hasOwn(hash, altKey)) {
|
67 | res[key] = hash[altKey]
|
68 | if (!preserve) {
|
69 | delete hash[altKey]
|
70 | }
|
71 | return true
|
72 | }
|
73 | }
|
74 | return false
|
75 | }
|