Vue.js（12）- 霸道的render函数渲染组件

Posted 2021-01-20 houfee

index.html

  <div id="app">
    <p>这是index.html</p>
  </div>

index.js

// 导入全的vue
// import Vue from ‘vue/dist/vue.js‘
// 导入阉割版的vue
import Vue from ‘vue‘

import App from ‘./app.vue‘
const vm = new Vue({
  el: ‘#app‘,
  template: `<div>这是template模板页面</div>`,
  // render函数会把页面上原来的都覆盖掉，le和template都都没有意义了，此时可以使用阉割版的vue了
  // createElement 是vue传的形参
  // render: function(createElement) {
  //   return createElement(App)
  // }

  // 简化后的函数
  render: c => c(App)
})

app.vue

<template>
  <div id="app1111">
    <h1>这是render函数组件</h1>
  </div>
</template>