Vue插槽入门

1.插槽是什么

(1)作用:让组件内部的一些 结构 支持 自定义
(2)使用场景:组件的内容部分,不希望写死,希望在使用的时候自定义。
(3)插槽分类:默认插槽(组件内定制一处结构)、具名插槽(组件内定制多出插槽)
(4)作用域插槽:是插槽的一个传参语法

2.插槽 - 默认插槽

插槽的语法:
(1)组件内需要定制的结构部分,改用<slot></slot> 进行占位
(2)在其他地方使用组件时, <组件名></组件名>标签内部, 传入结构替换slot
在这里插入图片描述

3.插槽-后备内容(设置默认值)

(1)插槽后备内容:封装组件时,可以为预留的 <slot> 插槽提供后备内容(默认内容)。
(2)语法: 在 <slot>我是后备内容</slot> 标签内,放置内容, 作为默认显示内容
(3)效果:
①外部使用组件时,不传东西,则slot会显示后备内容
②外部使用组件时,传东西了,则slot整体会被换掉
在这里插入图片描述

4.插槽 - 具名插槽

(1)具名插槽语法:
①多个slot使用name属性区分名字
②使用template包裹起来分别成为独立的整体,来配合v-slot:名字来分发对应标签
在这里插入图片描述

(2)具名插槽简化语法:#插槽名
在这里插入图片描述

5.插槽 - 作用域插槽

(1)作用域插槽: 定义 slot 插槽的同时, 是可以在插槽中传值的。给 插槽 上可以 绑定数据,将来在其他地方使用(定义了插槽的)组件时可以使用插槽的数据。
(2)基本使用步骤:
①给 slot 标签, 以 添加属性的方式传值

<slot :row="item" msg="测试文本"></slot>

②所有添加的属性, 都会被收集到一个对象中

{
	row: {id: 2, name: '张三', age: 18 },
	msg: '测试文本' 
}

③在template中, 通过 #插槽名= "obj" 接收,默认插槽名为 default

<MyTable :data="list">
	<template #default="obj">
		<button @click="del(obj.row.id)">删除</button>
	</template>
</MyTable>

相关推荐

  1. Vue 3

    2024-07-15 23:02:02       60 阅读
  2. Vue 讲解

    2024-07-15 23:02:02       47 阅读
  3. <span style='color:red;'>vue</span><span style='color:red;'>插</span><span style='color:red;'>槽</span>

    vue

    2024-07-15 23:02:02      41 阅读
  4. <span style='color:red;'>Vue</span><span style='color:red;'>插</span><span style='color:red;'>槽</span>

    Vue

    2024-07-15 23:02:02      36 阅读
  5. [Vue]

    2024-07-15 23:02:02       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 23:02:02       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 23:02:02       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 23:02:02       57 阅读
  4. Python语言-面向对象

    2024-07-15 23:02:02       68 阅读

热门阅读

  1. js实现文件的分片上传

    2024-07-15 23:02:02       21 阅读
  2. Linux高级IO流详解

    2024-07-15 23:02:02       20 阅读
  3. 10个使用Numba CUDA进行编程的例子

    2024-07-15 23:02:02       18 阅读
  4. OSINT技术情报精选·2024年7月第2周

    2024-07-15 23:02:02       16 阅读
  5. 第一个AI应用(文心智能体平台)

    2024-07-15 23:02:02       16 阅读
  6. pytorch学习--使用m1 进行训练

    2024-07-15 23:02:02       18 阅读
  7. Halcon与C++之间的数据转换

    2024-07-15 23:02:02       17 阅读
  8. QT 报错C2872: “byte“: 不明确的符号

    2024-07-15 23:02:02       18 阅读
  9. 【linux 100条命令】

    2024-07-15 23:02:02       19 阅读