vue單頁應用使用render

之前都是做后台工作，由於工作需要才學VUE，想快點入手，但是官方文檔，真的是不太盡人意，需要自己查閱大量的資料。

廢話少說，直接上代碼吧，給一些想快速上手的小伙伴們一點幫助，少走點彎路，少花點時間。

想要像寫render函數， 其實就是把<template></template>去掉，比如現在有A.vue是用render來寫的，那么代碼如下：

<script>
export default {
  name: "mycomponent",
  render: function(createElement) {
    return createElement(
      "h" + this.level, // tag name 標簽名稱
      this.$slots.default // 子組件中的陣列
    );
  },
  props: {
    level: {
      type: String
    }
  }
};
</script>

　　然后想在B.vue調用A.vue，直接像調用正常組件一樣就可以了，代碼如下

<template>
  <div class="hello">
     <zj level="2">
       <slot>我是render組件</slot>
     </zj>
  </div>
</template>

<script>
import zj from '@/components/A'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    zj
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

　　其實就是這么簡單，沒做過的小伙伴們也許很疑惑，但是說清楚了，其實就是那么一回事。希望對剛剛學習VUE的小伙伴們有所幫助