【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)

这篇具有很好参考价值的文章主要介绍了【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

插槽

插槽是什么?
在 Vue 2 中,插槽(slot)是一种用于定义组件内部内容分发的机制。它允许你将组件中的一部分内容替换为用户自定义的内容,并在组件内部进行渲染。

通过在组件模板中使用 <slot></slot> 标签,你可以指定一个插槽的位置。这个位置可以被父组件中的任意内容所填充。父组件中的内容将被插入到插槽所在的位置,并最终与组件的其他部分一起进行渲染。

普通插槽

【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3
首先建立弹窗组件,在内容的位置添加 <slot></slot> 标签:

<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 为组件添加插槽 -->
      <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>

在父组件中引入组件,并且在组件标签中写入内容。如果不写将展示默认 <slot></slot> 标签里面的文字,默认内容,也叫做后备内容。

<!-- 结构 -->
<template>
  <div id="app">
    <!-- 组件标签中的内容将自动填充到插槽中,如果其中不写内容将展示 上面slot标签中的“你确认要退出本系统么?” -->
    <MyDialog>你好!欢迎使用vue2</MyDialog>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
  name: "App",
  data() {
    return {
    };
  },
  components:{
    MyDialog
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(167, 167, 167);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>

最后效果成功填充了弹窗中的内容:
【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3

具名插槽

一个组件可以拥有多个插槽,每个插槽可以有不同的名称,以便在父组件中选择性地进行内容分发。父组件可以使用 <template><slot> 标签的 name 属性来决定插槽的位置和名称。

插槽的使用可以使组件更具灵活性,让父组件能够向子组件传递不同的内容,并在组件内部进行渲染。这在构建可重用的组件和布局时非常有用。

【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3
比如其中 弹出框的 标题 ,内容,以及按钮都不一样,我们就可以使用具名插槽来更改代码,为slot标签取名(name属性)
为组件中的slot取名:

<template>
  <div class="dialog">
    <div class="dialog-header">
      <!-- 标题取名 -->
      <h3 ><slot name="title">友情提示</slot></h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 为组件添加插槽,内容取名 -->
      <slot name="content">你确认要退出本系统么?</slot>
    </div>
    <div class="dialog-footer">
      <!-- 尾部按钮取名 -->
      <slot name="button">
        <button>取消</button>
        <button>确认</button>
      </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>

为父组件的组件标签添加template标签,配合子组件:

<!-- 结构 -->
<template>
  <div id="app">
    <!-- 组件标签中的内容将自动填充到插槽中 -->
    <MyDialog>
      <!-- 使用v-slot:title与组件中name属性为title的slot绑定 -->
      <template v-slot:title>我是标题</template>
      <!-- 使用v-slot:content与组件中name属性为content的slot绑定 -->
      <template v-slot:content>我是内容</template>
      <!-- #button是v-slot:button的简写 -->
      <template #button>
        <button>取消</button>
        <button>确认</button>
      </template>
    </MyDialog>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyDialog from './components/MyDialog.vue';
export default {
  name: "App",
  data() {
    return {
    };
  },
  components:{
    MyDialog
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(167, 167, 167);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>

最后效果:

【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3

作用域插槽

插槽分类:

  1. 默认插槽(组件内定制一处结构)
  2. 具名插槽(组件内定制多处结构)

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

删除或查看都需要用到 当前项的 id,属于 组件内部的数据 通过 作用域插槽 传值绑定,进而使用
【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3

【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3
1.渲染子组件,并且在子组件slot标签中添加:all="item" :msg="item.id"属性,用于作用域插槽 传值。

<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>
           <!-- 为插槽提供返回数据,返回的数据将会被包装为一个对象,包含了slot标签上的属性 -->
          <slot :all="item" :msg="item.id">
            <button>删除</button>
          </slot>
        </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>

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

<!-- 结构 -->
<template>
  <div id="app">
   	<!--通过  #插槽名="obj” 接收,默认插槽名为default  -->
    <MyTable :data="list" #default="obj">
          <!-- 写删除方法 -->
      <button @click="deletelist(obj)">删除</button>
    </MyTable>
    <!--通过  #插槽名="obj” 接收,默认插槽名为default  -->
    <MyTable :data="list2" #default="obj">
          <!-- 写查看方法 -->
      <button  @click="chakanlist(obj)">查看</button>
    </MyTable>
  </div>
</template>

<!-- 行为 -->
<script>
// import MyBodys from './components/MyBodys.vue';
import MyTable from './components/MyTable.vue';

export default {
  name: "App",
  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 },
      ]
    };
  },
  components:{
    MyTable
  },
  methods:{
    chakanlist(obj){
      console.log(obj.all)
      console.log(obj.msg)
      alert("姓名:"+obj.all.name+" 年龄:"+obj.all.age)
    },
    deletelist(obj){
      this.list = this.list.filter(item => item.id != obj.all.id)
    }
  }
};
</script>

<!-- 样式 -->
<style>
#app {
  width: 100%;
  height: 700px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
*{
  margin: 0;
  padding: 0;
}
</style>

效果:
【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法),vue,javascript,前端,css,html,vue.js,开发语言,css3文章来源地址https://www.toymoban.com/news/detail-705079.html

到了这里,关于【vue2第十四章】 插槽(普通插槽、具名插槽、作用域插槽语法)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第十四章 RabbitMQ应用

    一般MQ用于系统解耦、削峰使用,常见于微服务、业务活动等场景。 RabbitMQ整体上是一个生产者与消费者模型,主要负责接收、存储和转发消息。 Producer:生产者,就是投递消息的一方。消息一般可以包含2个部分:消息体和标签(Label)。消息的标签用来描述这条消息,比如一个

    2024年01月25日
    浏览(55)
  • 第十四章 ObjectScript - 系统函数

    本节重点介绍 ObjectScript 中一些最常用的系统函数。 这些函数的名称不区分大小写。 类库还提供了大量实用方法,可以像使用函数一样使用它们。 在给定一些输入的情况下,可以使用以下函数来选择一个值: $CASE 将给定的测试表达式与一组比较值进行比较,然后返回与匹配

    2024年02月10日
    浏览(36)
  • Nodejs 第十四章(process)

    process 是Nodejs操作当前进程和控制当前进程的API,并且是挂载到globalThis下面的全局API API 介绍 1. process.arch 返回操作系统 CPU 架构 跟我们之前讲的os.arch 一样 \\\'arm\\\' 、 \\\'arm64\\\' 、 \\\'ia32\\\' 、 \\\'mips\\\' 、 \\\'mipsel\\\' 、 \\\'ppc\\\' 、 \\\'ppc64\\\' 、 \\\'s390\\\' 、 \\\'s390x\\\' 、以及  \\\'x64\\\' 2. process.cwd() 返回当前的工作目

    2024年02月10日
    浏览(31)
  • Android 第十四章 FragmentContainerView

    FragmentContainerView extends FrameLayout FragmentContainerView是专门为Fragments设计的自定义布局。它扩展了FrameLayout,因此它可以可靠地处理Fragment 事务,并且它还具有与Fragment 行为协调的附加特性 FragmentContainerView应用作Fragments的容器,通常设置在活动的xml布局 FragmentContainerView将只允许

    2024年02月11日
    浏览(41)
  • [C国演义] 第十四章

    力扣链接 常见的子数组问题 ⇒ 要使用动态规划的解法 那么要确定dp数组的含义 ⇒ do[i] — — 以 s[i] 结尾的子数组可不可以用 wordDict中的字符串来表示 那么问题来了, 如何判断字符串[j, i] 在没在wordDict中呢? 我们可以用一个 哈希表 . 将wordDict导入一个哈希表中, count 判读一个

    2024年02月08日
    浏览(40)
  • 基于vue和element-ui的表格组件,主推数据渲染,支持内容和方法灵活绑定,提供动态具名插槽自定义内容

            组件名为commonTable,主要是基于element-ui中的表格组件进行二次封装的组件,集成了常用的表格功能,除默认内容的显示外,还包括以下几点:         1. 状态的筛选和显示;         2. 操作按钮的显示和方法绑定;         3. 自定义具名插槽内容的封装;      

    2024年02月07日
    浏览(50)
  • 《微服务实战》 第十四章 RabbitMQ应用

    第十六章 Spring cloud stream应用 第十五章 RabbitMQ 延迟队列 第十四章 RabbitMQ应用 一般MQ用于系统解耦、削峰使用,常见于微服务、业务活动等场景。 RabbitMQ整体上是一个生产者与消费者模型,主要负责接收、存储和转发消息。 Producer:生产者,就是投递消息的一方。消息一般可

    2024年02月06日
    浏览(46)
  • 第十四章 使用Vercel部署在线文档

    文档网站需要发布到互联网上才能让更多的人知道。传统的发布方法需要做以下准备。 Linux服务器; 网页服务软件 Nginx; 购买域名 + 实名认证; HTTPS 证书; Sftp 上传工具; Github Action CI 自动发布最新文档。 这里面租用服务器和域名需要一笔花费。安装 Linux、Nginx,配置域名

    2024年02月07日
    浏览(49)
  • 第十四章 TIM基本定时器

    目录 13.1 定时器的分类 13.2 TIM基本定时器简介 13.2.1 定时器的概念和作用 13.2.2 TIM基本定时器的工作原理和使用场景 13.3 TIM基本定时器功能框图 13.3.1 时钟源 13.3.2 控制器 13.3.3 时基(定时器的心脏) 13.3.4 影子寄存器 13.4 TIM基本定时器的初始化和配置方法 13.4.1 定时时间的计算

    2024年02月05日
    浏览(35)
  • 第十四章 Unity 移动和旋转(下)

    本章节我们介绍另外两种形式的旋转,也对应了两个方法。首先是RotateAround方法,他是围绕穿过世界坐标中的 point 点的 axis轴旋转 angle 度。这个方法虽然比较晦涩难懂,但是我们使用一个案例,大家就非常明白了。我们创建一个新的“SampleScene5”场景,然后创建一个“Cube”

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包