vue的render函数

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

静小谢

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

阅读量263

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/kekexiaomayi/article/details/106119517

版权

vue的render函数

render函数的基本定义

vue使用html构建页面的，render方便用js来渲染。

render的基本组成

一、首先render里有createElement（）方法
二、createElement（参数1，参数2，参数3）方法里接收三个参数

参数1：必须要，html标签
参数2：可选，标签的属性
参数3：可选，子元素，有多个子元素用数组表示。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的render</title>
</head>
<body>
<div class="test" id="dome">{{msg}}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
            el:"#dome",
            data:{
                msg:"打开测试"
            },
            methods:{
                clickTipSum() {
                    console.log('点了父元素');
                }
            },
             render(createElement){
                 return createElement(
                    //  p标签作为参数1，挂载到id为dome的div上, 该div会被p标签替换。
                    "p",
                    // 参数2是对象，该对象放p标签属性
                    {
                        // 样式
                        style: { marginLight: "8px", padding: "10px 20px", color: '#abcdef', backgroundColor: 'gold ' },
                        on: {
                            // 监听点击事件
                            click: () => {
                                this.clickTipSum();
                            },
                        }
                    },
                    // +++++++++++++++++++++++参数3方式1++++++++++++++++
                    '我是内容加测试子元素',
                    // +++++++++++++++++++++++参数3方式2 ，p标签的子元素，多个放在数组里++++++++++++
                    [
                        // 用相同的创建子元素span标签
                        createElement('span', `${this.msg}子元素1`),
                        // 用相同的创建子元素p标签
                        createElement('h2', `${this.msg}子元素2`),
                        // 子元素p标签
                        '我是内容加测试子元素3',
                    ],

                    )
                }
        });
</script>
</html>

render的this.$slots

可以加插槽。

 render(createElement){
                //  相当于 title = <slots name='title'></slots>
                 const title = this.$slots.title;
                 return createElement(
                    "div",
                    [
                        // 在span里加上<slots name='title'></slots>
                        createElement('span', title),
                    ],
                    )
                }