【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模板网!

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

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

相关文章

  • 第十四章 MyBatis

    不需要的删除 Springboot自带配置文件 这里的mapper包就相当于三层架构里面的Dao这个包 下面我们测试一下 现在这里我的SQL语句写错了也不会报错 如果没有提示表名或者表爆红了,我们需要进行配置 Hikari是springboot自带的连接池 如果在springboot项目中,我想使用druid连接池 第一步

    2024年01月20日
    浏览(38)
  • [C国演义] 第十四章

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

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

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

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

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

    2024年02月08日
    浏览(49)
  • 《微服务实战》 第十四章 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)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包