Vue：插槽简介和基本使用

最新推荐文章于 2024-05-06 18:46:17 发布
最新推荐文章于 2024-05-06 18:46:17 发布
阅读量392 收藏 8
点赞数 4
文章标签： vue.js javascript 前端 插槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45427648/article/details/137147536
版权

插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 自定义

在这里插入图片描述

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分，改用****占位
  2. 使用组件时, ****标签内部, 传入结构替换slot
  3. 给插槽传入内容时，可以传入纯文本、html标签、组件

5.代码示例

App.vue
<template>
  <div>
    <!-- 2. 在使用组件时，组件标签内填入内容 -->
    <MyDialog>
      <div>你确认要删除么</div>
    </MyDialog>

    <MyDialog>
      <p>你确认要退出么</p>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>
MyDialog.vue
<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 1. 在需要定制的位置，使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>

插槽-具名插槽

1.需求

一个组件内有多处结构，需要外部传入标签，进行定制

在这里插入图片描述

上面的弹框中有三处不同，但是默认插槽只能定制一个位置，这时候怎么办呢?

2.具名插槽语法

  • 多个slot使用name属性区分名字
    在这里插入图片描述

  • template配合v-slot:名字来分发对应标签
    在这里插入图片描述

3.v-slot的简写

v-slot写起来太长，vue给我们提供一个简单写法 v-slot —> #

4.代码示例

MyDialog.vue
<template>
  <div class="dialog">
    <div class="dialog-header">
      <!-- 一旦插槽起了名字，就是具名插槽，只支持定向分发 -->
      <slot name="head"></slot>
    </div>

    <div class="dialog-content">
      <slot name="content"></slot>
    </div>
    <div class="dialog-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  width: 470px;
  height: 230px;
  padding: 0 25px;
  background-color: #ffffff;
  margin: 40px auto;
  border-radius: 5px;
}
.dialog-header {
  height: 70px;
  line-height: 70px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.dialog-header .close {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.dialog-content {
  height: 80px;
  font-size: 18px;
  padding: 15px 0;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer button {
  width: 65px;
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #e1e3e9;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  border-radius: 3px;
}
.dialog-footer button:last-child {
  background-color: #007acc;
  color: #fff;
}
</style>
App.vue
<template>
  <div>
    <MyDialog>
      <!-- 需要通过template标签包裹需要分发的结构，包成一个整体 -->
      <template v-slot:head>
        <div>我是大标题</div>
      </template>
      
      <template v-slot:content>
        <div>我是内容</div>
      </template>

      <template #footer>
        <button>取消</button>
        <button>确认</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>

作用域插槽

1.插槽分类

  • 默认插槽

  • 具名插槽

    插槽只有两种，作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用

3.场景

封装表格组件

在这里插入图片描述

4.使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

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

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

    { id: 3, msg: '测试文本' }

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

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

5.代码示例

MyTable.vue
<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 1. 给slot标签，添加属性的方式传值 -->
          <slot :row="item" msg="测试文本"></slot>

          <!-- 2. 将所有的属性，添加到一个对象中 -->
          <!-- 
             {
               row: { id: 2, name: '孙大明', age: 19 },
               msg: '测试文本'
             }
           -->
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array
  }
}
</script>

<style scoped>
.my-table {
  width: 450px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 24px;
  margin: 30px auto;
}
.my-table thead {
  background-color: #1f74ff;
  color: #fff;
}
.my-table thead th {
  font-weight: normal;
}
.my-table thead tr {
  line-height: 40px;
}
.my-table th,
.my-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.my-table td:last-child {
  border-right: none;
}
.my-table tr:last-child td {
  border-bottom: none;
}
.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>
App.vue
<template>
  <div>
    <MyTable :data="list">
      <!-- 3. 通过template #插槽名="变量名" 接收 -->
      <template #default="obj">
        <button @click="del(obj.row.id)">
          删除
        </button>
      </template>
    </MyTable>
    
    <MyTable :data="list2">
      <template #default="{ row }">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    show (row) {
      // console.log(row);
      alert(`姓名：${row.name}; 年纪：${row.age}`)
    }
  },
  components: {
    MyTable
  }
}
</script>
程序员无羡
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue学习笔记之slot插槽基本用法实例分析
10-15
主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下
详解Vue中使用插槽（slot）、聚类插槽
12-08
一、基本的插槽 这里总结两点 如果不在子组件中使用插槽（slot），那么在子组件中写任何代码都是无效的的，不会显示 （插槽默认值）如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往...
Vue：插槽的基本使用方法以及案例分析
Specif1c的博客
03-28 462
1.组件插槽的作用 2.插槽使用方法： slot的作用：预留一个插槽用于传递数据 小细节：如果slot里面有值，且父级模板中也有值， slot里面的值会被覆盖 案例：（分析看注释） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
vue.js：插槽的基本使用
零小唬的博客
12-11 324
vue.js：插槽的基本使用
Vue：插槽的理解与使用
qq_43811879的博客
12-20 652
vue插槽问题引入后备插槽具名插槽作用域插槽 问题引入 ​ 在学习vue插槽的时候我们应当先知道什么是vue的父子组件。那在什么时候会用到插槽呢？当构建页面的时候，我们在父组件中引入子组件，但是引入子组件之后还是无法满足我们的需求，我们还希望在子组件中添加一点东西，这个时候我们就要用到插槽来分发内容。 ​ 首先定义一个myslot的子组件 <template> <div> <p>我是子组件</p> </div> </template
vue插槽的基本使用
weixin_47124112的博客
07-25 4461
插槽（Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
【插槽】Vue中插槽Slot基本使用和具名插槽
森姐姐的博客
10-28 3629
Vue中插槽Slot基本使用和具名插槽
vue组件与插槽的基本使用
weixin_46544034的博客
02-12 719
vue组件与插槽的使用
VUE（六）：插槽的基本使用
算云烟
11-06 382
通俗易懂的讲，slot具有占位的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个位置里面 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？默认情况下是不会显示的，那么我执意要加DOM元素 到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方 <div id="app"> <children> <span>我是..
VUE学习笔记：插槽详解
杨威的博客
05-08 3639
刚开始看Vue官方文档的时候对插槽不是很理解，其实通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，具有高度的灵活性。 1、使用场景 先来看看插槽的使用场景，否则可能连学习的欲望都没有了。插槽还是很重要的，即使不去定义，也要学会使用。 下面这个图中使用了Vant中的NavBar组件，该组件用于手机端标题展示，默认的组件展示的只有标题和返回按钮，但是在有些情况下，我们可能需要在标题栏中放一个增加或查询按钮，这个时候就需要利用插槽来让用户自己定义区域中的内...
Vue:作用域插槽的使用方法
Specif1c的博客
03-29 982
基本语法： 代码案例：（解析在注释中） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
【JavaScript源代码】vue具名插槽的基本使用实例.docx
12-29
vue具名插槽的基本使用实例 　具有名字的插槽slot使用 中的 "name" 属性绑定元素 　注意： 　1，如果没有匹配到 则放到匿名的插槽中 　2，具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序　父...
插槽与具名插槽的基本使用
06-30
这是我学习插槽和具名插槽的例子
vue组件化中slot的基本使用方法
12-29
前言 slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧 ...父组件.vue 这是父组件的slot替代内容！ ​ <s
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 421
注释很详细，直接上代码……
v-for中的key是什么作用
最新发布
qq_39196447的博客
05-06 254
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释：key属性主要用在Vue的虚拟DOM算法，在新Inodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 302
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
自定义表单元素组件内容变化触发ElForm重新校验
东逝水
05-02 589
写一个FeeTypeSelector的组件，它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中，也能正常的校验。不过我今天发现，Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失，而不需要点击提交按钮调用form.validate方法，而上面的自定义组件就不能。
Vue插槽使用方法和场景
03-25
Vue的插槽(Slot)是一种占位符，可以让我们在组件中预留出一些空间，用于父组件在使用子组件的时候填充一些内容。具体来说，我们在组件的模板中定义一个或多个插槽，父组件可以通过在使用该组件时填充相应的内容，来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员无羡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值