vue插槽

插槽分类:默认插槽(组件内定制一处结构) 具名插槽(组件内定制多处结构)

作用域插槽:是插槽的一种传参语法

1. 默认插槽

步骤:

  1. 先使用<slot><slot>占位

  2. 在要使用的组件中,引入这组件,并在组件之间填写要向插槽里插入的内容

2. 具名插槽

步骤:

  1. 先使用<slot><slot>占位

  2. 在要使用的组件中,引入这组件,并在组件之间填写要向插槽里插入的内容

  3. 插入的内容使用<template>标签加#插槽名,来区分插入的地方

3. 作用域插槽

javascript 复制代码
//第3步简化  #default="obj"  obj是可以随便命名的变量
<MyTable :list="list">
    <template #default="{id}"> //直接解构obj
        <button @click="del(id)">删除</button>
    </template>
</MyTable>
相关推荐
ssshooter27 分钟前
Tauri 踩坑 appLink 修改后闪退
前端·ios·rust
刮涂层_赢大奖39 分钟前
我把 AI 编程 Agent 变成了宝可梦,让它们在像素风办公室里跑来跑去
前端·typescript·claude
重庆穿山甲1 小时前
Java开发者的大模型入门:Spring AI组件全攻略(二)
前端·后端
重庆穿山甲1 小时前
Java开发者的大模型入门:Spring AI组件全攻略(一)
前端·后端
布列瑟农的星空1 小时前
前端都能看懂的rust入门教程(二)——函数和闭包
前端·后端·rust
颜酱2 小时前
二叉树分解问题思路解题模式
javascript·后端·算法
晨米酱2 小时前
四、Prettier 编辑器集成指南
前端·代码规范
文心快码BaiduComate2 小时前
Comate 4.0新年全面焕新!底层重构、七大升级、复杂任务驾驭力跃升
前端·程序员·架构
怪可爱的地球人2 小时前
uni-app:5 步接入 vite-plugin-uni-pages,用 <route> 自动生成 pages.json
前端
前端Hardy2 小时前
告别 !important:现代 CSS 层叠控制指南,90% 的样式冲突其实不用它也能解
前端·vue.js·面试