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>
相关推荐
AI大模型顾潇1 小时前
[特殊字符] 本地大模型编程实战(29):用大语言模型LLM查询图数据库NEO4J(2)
前端·数据库·人工智能·语言模型·自然语言处理·prompt·neo4j
工业互联网专业1 小时前
基于springboot+vue的医院门诊管理系统
java·vue.js·spring boot·毕业设计·源码·课程设计·医院门诊管理系统
九月TTS1 小时前
TTS-Web-Vue系列:Vue3实现内嵌iframe文档显示功能
前端·javascript·vue.js
爱编程的小学究1 小时前
【node】如何把包发布到npm上
前端·npm·node.js
我爱加班、、1 小时前
Chrome安装最新vue-devtool插件
javascript·vue.js·chrome·vue-devtool
weixin_473894772 小时前
前端服务器部署分类总结
前端·网络·性能优化
LuckyLay2 小时前
React百日学习计划-Grok3
前端·学习·react.js
澄江静如练_2 小时前
小程序 存存上下滑动的页面
前端·javascript·vue.js
源码方舟2 小时前
基于SpringBoot+Vue的房屋租赁管理系统源码包(完整版)开发实战
vue.js·spring boot·后端
互联网搬砖老肖2 小时前
Web 架构之会话保持深度解析
前端·架构