render 组件

 <template>
-  <div id="app">
+<div id="app">
     <counter></counter>
     <p>
         <button @click="increment">+</button>
         <button @click="decrement">-</button>
     </p>
-  </div>
+    <child :level="1">Hello world!</child>
+    <child :level="3">Hello world!</child>
+</div>
 </template>
 
 <script>
 import counter from './components/counter.vue'
-import {store} from './main.js'
+import child from './components/child.vue'
+
+import {
+    store
+} from './main.js'
 
 export default {
     name: 'app',
-  data () {
+    data() {
         return {
 
         }
     },
     computed: {
-    count () {
+        count() {
             return store.state.count
         }
     },
     methods: {
-    increment () {
+        increment() {
             store.commit('increment')
         },
-    decrement () {
+        decrement() {
             store.commit('decrement')
         }
     },
     components: {
-    counter
+        counter,child
     }
 }
 </script>

+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+    computed: {
+
+    },
+    mounted() {
+
+    },
+    methods: {},
+    components: {},
+    render: function(createElement) {
+        return createElement(
+            'h' + this.level,
+            this.$slots.default
+        )
+    },
+    props: {
+        level: {
+            type: Number,
+            required: true
+        }
+    }
+}
+</script>
+
+<style lang="css">
+</style>

@@ -20,4 +20,6 @@ new Vue({
     render: h => h(App)
 })
 
-export { store }
+export {
+    store
+}