vue中插槽的本质是什么?

  • vue中slot插槽的本质是函数

    • 默认插槽: 一个名为default的函数

    • 命名插槽: 一个名为插槽名的函数

    • 作用域插槽: 一个带参数的函数

    声明一个带有插槽的组件Card

    • 正常写法
    xml 复制代码
    <template>
        <div>
            <slot name="title"/>
            <slot name="body"/>
            <slot :index="1" username="张三"/>
        </div>
    </template>
    • 下面这段代码和上面代码的作用是一样的, 每一个slot标签将来会编译成一个函数, 传递到组件内部.
      1. 没有name属性的slot会被编译为一个名为default的无参函数
      2. 有name属性的会被编译为一个以name属性值作为函数名的无参函数,
      3. 带有其他属性的slot标签会被编译为一个带参函数.
    xml 复制代码
    <script>
    import { h } from 'vue'
    export default {
        render() {
            // 在组件内部可以通过this.$slot获取插槽内容
            // 调用具名插槽函数
            const title = this.$slots.title()
            const body = this.$slots.body()
            // 调用默认作用域插槽函数
            const defaults = this.$slots.default({
                index: 1, username: '张三'
            })
            return h('div', {}, [
                defaults,
                title,
                body
            ])
        }
    }
    </script>

    调用一个带有插槽的组件Card

    xml 复制代码
    <template>
        <div>
            <Card>
                <!-- 会被编译为一个名为title的无参函数const title = ()=>{}, 传递给Card组件-->
                <template #title>
                    <h3>这是标题</h3>
                </template>
                <!-- 会被编译为一个名为body的无参函数const body = ()=>{}, 传递给Card组件-->
                <template #body>
                    <div>这是段落</div>
                </template>
                <!-- 会被编译为一个名为default的带参函数const default = (args)=>{}, 
                传递给Card组件-->
                <template v-slot="{ index, username }">
                    <div>{{ index }}-{{ username }}</div>
                </template>
            </Card>
        </div>
    </template>
    <script setup>
    import Card from './Card.vue'
    </script>
相关推荐
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊12 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选13 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ16 小时前
Vue2上
vue.js·npm
江城开朗的豌豆16 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景19 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js