Vue-组件6 使用render来渲染组件_vue render函数渲染组件-优快云博客

本文介绍Vue中如何利用render方法来渲染组件，重点强调render会替换整个el指定的元素，并提供代码示例和简要说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-组件6 使用render来渲染组件

一、注意

render渲染组件，会把一整个el指定的元素都替换为组件。

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<!--这一整个div将会被login替换掉-->
<div id="app">
    <span>哈哈</span>
</div>

<script>
	// 1.创建组件模板对象
    var login = {
        template: "<h1>登录组件</h1>"
    }
	
    var app = new Vue({
        el: "#app",
        data: {
        },
        methods: {},
        render: function (element) {	// 2.使用render渲染组件，element是一个形参，是一个函数，给该函数传入需要渲染的组件模板对象
            return element(login)	// 3.返回element(login)函数的结果，会替换掉整个app
        }
    })
</script>
</body>
</html>

执行结果：
在这里插入图片描述

三、简写

<div id="app">
    <span>哈哈</span>
</div>

<script>
	// 1.创建组件模板对象
    var login = {
        template: "<h1>登录组件</h1>"
    }
	
    var app = new Vue({
        el: "#app",
        data: {
        },
        methods: {},
        render: element => element(login)
    })
</script>
</body>
</html>

更新时间：2020-1-2