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>
相关推荐
echoVic14 分钟前
多模型支持的架构设计:如何集成 10+ AI 模型
java·javascript
程序员Agions18 分钟前
useMemo、useCallback、React.memo,可能真的要删了
前端·react.js
echoVic18 分钟前
AI Agent 安全权限设计:blade-code 的 5 种权限模式与三级控制
java·javascript
David凉宸19 分钟前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
滕青山20 分钟前
Vue项目BMI计算器技术实现
前端·vue.js
子兮曰24 分钟前
深入浏览器指纹:Canvas、WebGL、Audio是如何暴露你的身份的?
前端·浏览器·canvas
月亮补丁26 分钟前
AntiGravity只能生成 1:1 图片?一招破解尺寸限制
前端
何中应30 分钟前
MindMap部署
前端·node.js
boooooooom30 分钟前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
NAGNIP33 分钟前
程序员效率翻倍的快捷键大全!
前端·后端·程序员