Skip to content

Commit eb17d88

Browse files
author
zoumiaojiang
committed
fixed:unify camelCase props & hyphenate props #59 
1 parent 08f245f commit eb17d88

File tree

2 files changed

+88
-68
lines changed

2 files changed

+88
-68
lines changed

‎packages/mip/examples/mip/props.html

Lines changed: 87 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,93 +3,113 @@
33
<html mip>
44

55
<head>
6-
<meta charset="utf-8">
7-
<title>props</title>
8-
<meta name="apple-touch-fullscreen" content="yes">
9-
<meta name="apple-mobile-web-app-capable" content="yes">
10-
<meta name="format-detection" content="telephone=no">
11-
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
12-
<style>
6+
<meta charset="utf-8">
7+
<title>props</title>
8+
<meta name="apple-touch-fullscreen" content="yes">
9+
<meta name="apple-mobile-web-app-capable" content="yes">
10+
<meta name="format-detection" content="telephone=no">
11+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
12+
<style>
1313

14-
</style>
14+
</style>
1515
</head>
1616
<body>
17-
<mip-a></mip-a>
17+
<mip-a>
18+
<script type="application/json">
19+
{
20+
"mipProps": "mipProps",
21+
"mip-components": "mip-components"
22+
}
23+
</script>
24+
</mip-a>
1825
</body>
1926
<script src="../../dist/mip.js"></script>
2027
<script type="x-tempalte" id="mip-a-template">
21-
<div>
22-
<p>I am mip-a</p>
23-
<mip-b :userinfo="userinfo"></mip-b>
24-
<vue-c :userinfo="userinfo"></vue-c>
25-
</div>
28+
<div>
29+
<p>I am mip-a</p>
30+
<mip-b :userinfo="userinfo"></mip-b>
31+
<vue-c :userinfo="userinfo"></vue-c>
32+
</div>
2633
</script>
2734

2835
<script type="x-tempalte" id="mip-b-template">
29-
<div>
30-
<p>I am mip-b </p>
31-
<p>data from a prop: </p>
32-
<code>{{userinfo}}</code>
33-
</div>
36+
<div>
37+
<p>I am mip-b </p>
38+
<p>data from a prop: </p>
39+
<code>{{userinfo}}</code>
40+
</div>
3441
</script>
3542

3643
<script type="x-tempalte" id="vue-c-template">
37-
<div>
38-
<p>I am vue-c </p>
39-
<p>data from a prop: </p>
40-
<code>{{userinfo}}</code>
41-
</div>
44+
<div>
45+
<p>I am vue-c </p>
46+
<p>data from a prop: </p>
47+
<code>{{userinfo}}</code>
48+
</div>
4249
</script>
4350

4451

4552
<script>
46-
/* global mip */
47-
mip.registerVueCustomElement('mip-a', {
48-
template: '#mip-a-template',
49-
components: {
50-
'vue-c': {
51-
template: '#vue-c-template',
52-
props: {
53-
userinfo: [Object, Array]
54-
},
55-
created() {
56-
console.log('vue-c: ', this.userinfo);
57-
}
58-
}
59-
},
60-
data() {
61-
return {
62-
userinfo: [{
63-
name: 'fakehuang'
64-
}]
65-
};
66-
},
67-
filters: {
68-
stringify(data) {
69-
return typeof data === 'object' && JSON.stringify(data);
70-
}
53+
/* global MIP */
54+
MIP.registerVueCustomElement('mip-a', {
55+
template: '#mip-a-template',
56+
components: {
57+
'vue-c': {
58+
template: '#vue-c-template',
59+
props: {
60+
userinfo: [Object, Array]
61+
},
62+
created () {
63+
console.log('vue-c: ', this.userinfo)
64+
}
7165
}
72-
});
73-
74-
mip.registerVueCustomElement('mip-b', {
75-
template: '#mip-b-template',
76-
props: {
77-
userinfo: {
78-
default() {
79-
return {};
80-
},
81-
type: [Object, Array]
82-
}
83-
},
84-
data() {
85-
return {
86-
};
66+
},
67+
props: {
68+
mipProps: {
69+
type: String,
70+
default: ''
8771
},
88-
created() {
89-
console.log('mip-b: ', this.userinfo);
72+
'mip-components': {
73+
type: String,
74+
default: ''
75+
}
76+
},
77+
data () {
78+
return {
79+
userinfo: [{
80+
name: 'fakehuang'
81+
}]
9082
}
91-
});
83+
},
84+
mounted () {
85+
console.log(this.mipProps) // 空
86+
console.log(this.mipComponents) // mip-components
87+
},
88+
filters: {
89+
stringify (data) {
90+
return typeof data === 'object' && JSON.stringify(data)
91+
}
92+
}
93+
})
9294

95+
MIP.registerVueCustomElement('mip-b', {
96+
template: '#mip-b-template',
97+
props: {
98+
userinfo: {
99+
default () {
100+
return {}
101+
},
102+
type: [Object, Array]
103+
}
104+
},
105+
data () {
106+
return {
107+
}
108+
},
109+
created () {
110+
console.log('mip-b: ', this.userinfo)
111+
}
112+
})
93113
</script>
94114
</html>
95115

‎packages/mip/src/vue-custom-element/utils/props.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export function getPropsData (element, componentDefinition, props) {
156156
if (attrValue !== null) {
157157
propsData[propCamelCase] = convertAttributeValue(attrValue, props.types[propCamelCase])
158158
} else {
159-
propsData[propCamelCase] = element[propCamelCase] || propsData[name]
159+
propsData[propCamelCase] = element[propCamelCase] || propsData[propCamelCase] || propsData[name]
160160
}
161161
})
162162

0 commit comments

Comments
 (0)