vue2 render函数渲染内置组件 keep-alive component具体实现

Question

如何 在vue2中用render函数渲染 内置组件，具体的写法 请上代码

Answer 1

在Vue2中使用render函数渲染内置组件如下：

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  render() {
    return this.$createElement('div', { attrs: { id: 'app' } }, [
      this.$createElement('keep-alive', {}, [
        this.$createElement('router-view')
      ])
    ])
  }
}
</script>

在上面代码中，我们在render函数中使用this.$createElement方法来手动创建Vue的内置组件<div>和<keep-alive>，以及使用this.$createElement('router-view')来渲染路由组件。

需要注意的是，render函数中的第一个参数表示要渲染的元素类型，第二个参数是可选的VNode数据，第三个参数是子节点数组。另外，需要使用的内置组件需要先在组件选项中通过import导入。