如何在 Vue 中正确使用渲染功能？答案

【问题标题】：How do I use the render function correctly in Vue?如何在 Vue 中正确使用渲染功能？
【发布时间】：2020-10-26 09:40:43
【问题描述】：

我刚开始使用渲染功能，遇到了有一个问题。渲染时，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?

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：