如何在Vue中正确使用render函数？

Question

我刚刚开始使用render函数，遇到了一个问题。在呈现时，Home组件不显示在

App.vue

<template>
  <div>
    <h1>Vue Router Demo App</h1>

    <p>
      <router-link :to="{ name: 'home' }">Home</router-link> |
      <router-link :to="{ name: 'hello' }">Hello World</router-link>
    </p>

    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {}
</script>

浏览器控制台中没有错误。

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './App'
import Hello from './views/Hello'
import Home from './views/Home'




const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/hello',
      name: 'hello',
      component: Hello,
    },
  ],
});

const app = new Vue({
  el: '#app',
  components: { App },
  router,
});

Home.vue

使用此配置，将不显示路由。

<script>
export default {}
import Vue from 'vue'

new Vue({
  el: '#app',
  render(createElement) {
    return createElement("div", { class: "container" }, [
      createElement("p", { class: "my-class" }, "Some cool text")
    ])
  }

});
</script>

我只想在组件中使用呈现函数。或了解如何对两个或多个vue组件正确使用render函数。

如何在组件Home和Hello之间切换来正确配置应用程序

Answer 1

Vue中的组件应该从vue组件继承并注入到基本组件中。

​

Vue.component('home', {
  render(createElement) {
    return createElement("div", { class: "container" }, [
      createElement("p", { class: "my-class" }, "Some cool text")
    ])
  }
})

new Vue({
  el: '#app',
  components: ['home'],
  template: '<home/>'
})

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

​