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

已于 2023-09-05 23:26:25 修改
阅读量862 收藏 2
点赞数
分类专栏： vue 文章标签： javascript 前端 css html vue.js 开发语言 css3
于 2023-09-05 23:21:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72979483/article/details/132701381
版权

插槽

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

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

普通插槽

在这里插入图片描述
首先建立弹窗组件，在内容的位置添加 <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>

最后效果成功填充了弹窗中的内容：
在这里插入图片描述

具名插槽

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

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

在这里插入图片描述
比如其中 弹出框的 标题 ，内容，以及按钮都不一样，我们就可以使用具名插槽来更改代码，为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>

最后效果：

在这里插入图片描述

作用域插槽

插槽分类:

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

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

删除或查看都需要用到 当前项的 id，属于 组件内部的数据 通过 作用域插槽 传值绑定，进而使用
在这里插入图片描述

在这里插入图片描述
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>

效果：
在这里插入图片描述

一个大不溜w
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 插槽
qq_45771053的博客
08-02 1865
允许开发者在封装组件时，把。不确定的，希望由用户指定的部分。
Vue匿名插槽与作用域插槽的合并和覆盖行为
10-17
主要介绍了Vue基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
详解Vue 匿名、具名和作用域插槽的使用方法
10-17
主要介绍了Vue 匿名、具名和作用域插槽的使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue作用域插槽实现方法及作用详解
10-15
主要介绍了Vue作用域插槽实现方法及作用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue2slot插槽（理解与应用）
最新发布
zwdkkk的博客
04-21 585
举个例子：组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情。作用域插槽允许子组件将数据传递到父组件中的插槽内容中，使得父组件可以使用子组件中的数据进行渲染。scope用于父组件往子组件插槽放的html结构接收子组件的数据。
Vue2——默认插槽、具名插槽、作用域插槽
qq_69223185的博客
01-14 794
面试官问：说说vue2中插槽？
Vue2 插槽的使用【默认插槽、具名插槽、作用域插槽】
weixin_52212950的博客
12-12 9950
这篇文章我们一起来学习一下 Vue2 插槽的使用，文章大致分为两个模块，第一部分是什么是插槽，其作用是什么，第二部分为三种插槽的使用，分别为默认插槽，具名插槽，作用域插槽，相信大家学习完这篇文章后一定会受益匪浅。
Vue2基础---插槽
qq_68587393的博客
02-13 756
例如，如果你的 Vue 实例有一个。的值实际上可以是任何能够作为函数定义中的参数 (slotProps) 的 JavaScript 表达式,可以使用。Vue2中，插槽的使用可以在父组件中传递结构给子组件，复用子组件的同时也扩展了自定义能力。子模板里的所有内容都是在子作用域中编译的。插槽仅可以访问本模板（父组件）的数据，和父组件有着相同的作用域，无法访问到子组件数据。有时让插槽内容能够访问子组件中才有的数据是很有用的，例如，设想一个带有如下模板的。默认插槽时，组件的标签才可以被当作插槽的模板来使用。
Vue2：slot插槽的三种用法
Brave_heart4pzj的博客
02-01 836
Vue
vue3和vue2插槽slot的使用
学思QAQ的博客
07-03 749
slot插槽
Vue2基础篇-36-插槽(slot)
Alan0517
12-10 2140
插槽(slot)
浅析vue插槽和作用域插槽的理解
10-17
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
10-15
主要介绍了vue 使用插槽分发内容操作,结合实例形式总结分析了vue.js使用单个插槽、具名插槽、作用域插槽相关操作技巧与注意事项,需要的朋友可以参考下
Vue2中插槽的使用
djsjsjjswj的博客
07-11 2467
定义slot 插槽的同时 是可以传值的 给插槽上可以绑定数据，将来使用组件可以用。<slot :id="item.id" msg="测试文本"></slot>通过插槽完成了任何内容的定制，传什么显示什么，如果不传，则是空白。封装组件时，可以预留<slot> 插槽提供后备内容（默认内容）插槽只有俩种，作用域插槽不属于插槽的一种分类。外部使用了组件，不传东西，则slot会显示后备内容。在<slot>标签内，放置内容，作为默认显示内容。外部使用组件时，传东西了，则slot整体会被换掉。
vue2中的插槽
yizhiyang
02-06 1387
插槽是用来处理组件的内容的。插槽决定了组件的内容放在组件模板的何处。插槽使用的是vue官方提供的组件来完成的。
深入理解与运用Vue 2中的插槽（Slots）
2302_76609856的博客
04-19 628
Vue 2的插槽机制为组件设计带来了极大的灵活性，无论是默认插槽、具名插槽还是作用域插槽，都旨在提升组件的复用性和定制化程度。理解并熟练运用这些插槽类型，可以帮助开发者构建出更强大、更易于维护的组件体系，提升整个项目的开发效率和用户体验。在实践中，应根据具体业务需求选择合适的插槽类型，实现组件与父级模板之间的高效协作。
vue2的slot插槽
qq_43203949的博客
12-18 3282
vue的slot插槽 1.定义插槽 插槽使用slot标签来标识，并且插槽是放在组件的template模板里面的，vue允许向组件传递模板。Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。 定义模板 <!--假设这个组件叫my-com--> <!--组件模板如下：--> <template> <div> <p>------------
vue2之各种插槽
weixin_44994372的博客
03-28 198
作用于插槽：一般是用来父组件要根据子组件的值做显示。假如在子组件里有有一些数据，父组件要拿到这些数据，做不同的处理。插槽也是用于vue间创建的数据的一种方式，一般都是传递html元素。比如可以用于定义一个带样式的title等。具名插槽：顾名思义，有名字的插槽。默认插槽：没有name的插槽。
具名插槽和作用域插槽共同使用语法
08-12
具名插槽和作用域插槽是 Vue.js 框架中常用的模板语法，用于组件之间的数据传递和内容分发。 具名插槽语法使用`<slot>`元素，并通过`name`属性指定插槽的名称。在组件中，可以使用`<slot>`元素的`name`属性来定义具名插槽的内容。 例如，假设我们有一个父组件和一个子组件，并且希望在父组件中传递不同的内容给子组件进行渲染。可以在子组件的模板中使用`<slot>`元素来定义插槽，并在父组件中使用`<template>`标签来填充插槽内容。 子组件模板： ```html <template> <div> <slot name="header"></slot> <div>子组件的内容</div> <slot name="footer"></slot> </div> </template> ``` 父组件模板： ```html <template> <div> <child-component> <template v-slot:header> <h1>这是头部插槽的内容</h1> </template> <template v-slot:footer> <p>这是尾部插槽的内容</p> </template> </child-component> </div> </template> ``` 在上述例子中，父组件通过`<child-component>`标签包裹了子组件，并使用`v-slot`指令为具名插槽分配内容。`v-slot`指令后面跟着插槽的名称，然后使用`<template>`标签来包裹具体的插槽内容。 作用域插槽语法则允许我们在插槽中访问子组件的数据。通过在子组件模板的插槽元素上使用`v-bind`指令，可以将子组件的数据传递到父组件中。 例如，假设子组件的数据为`item`，我们可以在插槽中使用作用域插槽来访问该数据： 子组件模板： ```html <template> <div> <slot :item="item"></slot> </div> </template> ``` 父组件模板： ```html <template> <div> <child-component> <template v-slot:default="slotProps"> <p>{{ slotProps.item }}</p> </template> </child-component> </div> </template> ``` 在上述例子中，子组件使用`:item="item"`将`item`数据传递给插槽。而在父组件中，我们使用`v-slot:default`来定义默认插槽，并通过`slotProps`参数来获取子组件传递的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值