vue render函数和 scopedSlots 的使用使用插槽进行传参数

最新推荐文章于 2024-04-30 16:23:58 发布

SpringYoungYu

最新推荐文章于 2024-04-30 16:23:58 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_44917015/article/details/116405599

版权

<!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></title>
</head>

<body>
    <div id="app">
        <table-com>
            <template v-slot:con>
                <table-row></table-row>
            </template>
            <template v-slot:con1>
                <table-row></table-row>
            </template>
            <template v-slot:con2="{name1}">
                <table-row v-for="(item,index) in name1"></table-row>
            </template>
        </table-com>
    </div>

    <!-- 
    1.创建一个table组件 tr必须嵌套在tbody中
    2.使用render函数来进行页面节点的渲染 可以避免bug

     -->
    <!-- 
        有一个问题
        tr必须要在tbody中
     -->
    <!-- <template id="table">
        <div>
            <table border cellspacing="0" cellpadding="10" width="500">
                <tbody>
                    <slot></slot>
                </tbody>

            </table>
        </div>
    </template> -->
    <template id="row">
        <tr>
            <td>13213</td>
            <td>13213</td>
            <td>13213</td>
            <td>13213</td>
        </tr>
    </template>
    <!-- 

        插槽
        让用户自定义数据的显示格式
     -->
    <script src="../../vue.js"></script>
    <script>
        Vue.component("table-com",
            {
                data() {
                    return {
                        val: 'qweqwe',
                        arr: [
                            { id: 1, name: '刘亦菲' },
                            { id: 2, name: '赵丽颖' },
                            { id: 3, name: '秦岚' },
                            { id: 4, name: '刘涛' },
                            { id: 5, name: '王子文' }
                        ]
                    }
                },
                render(h) {
                    // 一种proxy 包含当前vue实例
                    console.log(this)
                    // 创建tag需要使用数组
                    return h('table', [h('tbody', [
                        this.$slots.con,
                        this.$slots.con1,
                        this.$scopedSlots.con2({ name1: this.arr })
                    ])])
                },
                mounted() {
                    console.log(this)
                    // 当前vue实例
                    // 使用实例中可以获取到的slot项 将其渲染在页面中
                    // console.log( this.$slots )
                },
            });
        Vue.component("table-row",
            {
                data() {
                    return {
                        val: 'qweqwe',

                    }
                }, template: "#row",
            });
        const vm = new Vue({
            data: {
                // arr: [
                //     { id: 1, name: '刘亦菲' },
                //     { id: 2, name: '赵丽颖' },
                //     { id: 3, name: '秦岚' },
                //     { id: 4, name: '刘涛' },
                //     { id: 5, name: '王子文' }
                // ]
            }
        }).$mount("#app");
        /*
        封装组件
        发表到npm上 大家都能使用
        */
        // 创建一个table组件
    //问题:tr必须嵌套在tbody中
    //this.$slots可以获取插槽内容
    //render函数中 作用域插槽的用法
    //1.如果要使用作用域插槽,那么就要用this.$scopedSlots
    //2.在render函数中 通过this.$scopedSlots.default({arr:this.arr})
    //3.在插槽内容上 使用v-slot接收参数 
    </script>
</body>

</html>

SpringYoungYu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue render函数和 scopedSlots 的使用使用插槽进行传参数

<!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>&l
复制链接

扫一扫