fixed:unify camelCase props & hyphenate props #59

mipengine · Jul 19, 2018 · eb17d88 · eb17d88
1 parent 08f245f
commit eb17d88
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 68 deletions.
diff --git a/packages/mip/examples/mip/props.html b/packages/mip/examples/mip/props.html
@@ -3,93 +3,113 @@
 <html mip>
 
 <head>
-    <meta charset="utf-8">
-    <title>props</title>
-    <meta name="apple-touch-fullscreen" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <style>
+  <meta charset="utf-8">
+  <title>props</title>
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style>
 
-    </style>
+  </style>
 </head>
 <body>
-    <mip-a></mip-a>
+  <mip-a>
+      <script type="application/json">
+        {
+          "mipProps": "mipProps",
+          "mip-components": "mip-components"
+        }
+      </script>
+  </mip-a>
 </body>
 <script src="../../dist/mip.js"></script>
 <script type="x-tempalte" id="mip-a-template">
-    <div>
-        <p>I am mip-a</p>
-        <mip-b :userinfo="userinfo"></mip-b>
-        <vue-c :userinfo="userinfo"></vue-c>
-    </div>
+  <div>
+    <p>I am mip-a</p>
+    <mip-b :userinfo="userinfo"></mip-b>
+    <vue-c :userinfo="userinfo"></vue-c>
+  </div>
 </script>
 
 <script type="x-tempalte" id="mip-b-template">
-    <div>
-        <p>I am mip-b </p>
-        <p>data from a prop: </p>
-        <code>{{userinfo}}</code>
-    </div>
+  <div>
+    <p>I am mip-b </p>
+    <p>data from a prop: </p>
+    <code>{{userinfo}}</code>
+  </div>
 </script>
 
 <script type="x-tempalte" id="vue-c-template">
-    <div>
-        <p>I am vue-c </p>
-        <p>data from a prop: </p>
-        <code>{{userinfo}}</code>
-    </div>
+  <div>
+    <p>I am vue-c </p>
+    <p>data from a prop: </p>
+    <code>{{userinfo}}</code>
+  </div>
 </script>
 
 
 <script>
-/* global mip */
-mip.registerVueCustomElement('mip-a', {
-    template: '#mip-a-template',
-    components: {
-        'vue-c': {
-            template: '#vue-c-template',
-            props: {
-                userinfo: [Object, Array]
-            },
-            created() {
-                console.log('vue-c: ', this.userinfo);
-            }
-        }
-    },
-    data() {
-        return {
-            userinfo: [{
-                name: 'fakehuang'
-            }]
-        };
-    },
-    filters: {
-        stringify(data) {
-            return typeof data === 'object' && JSON.stringify(data);
-        }
+/* global MIP */
+MIP.registerVueCustomElement('mip-a', {
+  template: '#mip-a-template',
+  components: {
+    'vue-c': {
+      template: '#vue-c-template',
+      props: {
+        userinfo: [Object, Array]
+      },
+      created () {
+        console.log('vue-c: ', this.userinfo)
+      }
     }
-});
-
-mip.registerVueCustomElement('mip-b', {
-    template: '#mip-b-template',
-    props: {
-        userinfo: {
-            default() {
-                return {};
-            },
-            type: [Object, Array]
-        }
-    },
-    data() {
-        return {
-        };
+  },
+  props: {
+    mipProps: {
+      type: String,
+      default: ''
     },
-    created() {
-        console.log('mip-b: ', this.userinfo);
+    'mip-components': {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      userinfo: [{
+        name: 'fakehuang'
+      }]
     }
-});
+  },
+  mounted () {
+    console.log(this.mipProps) // 空
+    console.log(this.mipComponents) // mip-components
+  },
+  filters: {
+    stringify (data) {
+      return typeof data === 'object' && JSON.stringify(data)
+    }
+  }
+})
 
+MIP.registerVueCustomElement('mip-b', {
+  template: '#mip-b-template',
+  props: {
+    userinfo: {
+      default () {
+        return {}
+      },
+      type: [Object, Array]
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  created () {
+    console.log('mip-b: ', this.userinfo)
+  }
+})
 </script>
 </html>
 
diff --git a/packages/mip/src/vue-custom-element/utils/props.js b/packages/mip/src/vue-custom-element/utils/props.js
@@ -156,7 +156,7 @@ export function getPropsData (element, componentDefinition, props) {
     if (attrValue !== null) {
       propsData[propCamelCase] = convertAttributeValue(attrValue, props.types[propCamelCase])
     } else {
-      propsData[propCamelCase] = element[propCamelCase] || propsData[name]
+      propsData[propCamelCase] = element[propCamelCase] || propsData[propCamelCase] || propsData[name]
     }
   })