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>
相关推荐
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
要加油哦~7 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程7 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
影子信息11 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月11 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu11 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子201811 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript