[Vue] 33.底层render函数

最新推荐文章于 2024-08-15 16:42:09 发布

weiweicn!

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量131

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/u014627255/article/details/125638974

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、想实现父组件传递过来不同的值，渲染不同元素

常规方法：根据传过来的值，通过if判断，把所有情况列举出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>31</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // render function
        const app = Vue.createApp({
            template: `
            <my-title :level="1">
                hello
            </my-title>
            `
        });
        app.component('my-title', {
            template: `
            <h1 v-if="level === 1"><slot /></h1>
            <h2 v-if="level === 2"><slot /></h2>
            <h3 v-if="level === 3"><slot /></h3>
            <h4 v-if="level === 4"><slot /></h4>
            <h5 v-if="level === 5"><slot /></h5>
            `
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>

使用render函数拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>31</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // render function
        const app = Vue.createApp({
            template: `
            <my-title :level="1">
                hello
            </my-title>
            `
        });
        app.component('my-title', {
            props: ['level'],
            render() {
                const { h } = Vue;
                return h('h'+ this.level, {}, this.$slots.default())
            },
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>