qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 大数据 › 数据仓库与分析 › 第二十九章 Vue之插槽

第二十九章 Vue之插槽

[复制链接]
发表于 2025-12-31 19:14:06 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
目次

一、弁言
二、默认插槽
2.1. 默认插槽根本语法
2.2. 完备代码 
2.2.1. main.js
2.2.2. App.vue
2.2.3. MyDialog.vue
2.3. 运行效果
三、插槽后备内容（默认值）
3.1. 插槽后备内容根本语法
3.2. 完备代码 
3.2.1. main.js
3.2.2. App.vue
3.2.3. MyDialog.vue
3.3. 运行效果
四、具名插槽
4.1. 具名插槽语法
4.2. 完备代码 
4.2.1. main.js
4.2.2. App.vue
4.2.3. MyDialog.vue
五、作用域插槽 
5.1. 作用域插槽语法
5.2. 完备代码 
​5.2.1. main.js
5.2.2. App.vue 
5.2.3. MyTable.vue 

一、弁言

如下图所示的两个对话框，除了内部的提示语信息内容有一些差异外，其他部分完全类似。这种环境下我们可以将对话框类似公用的部分抽取封装成一个组件，内部的会变更的提示语信息（组件的内容）通过插槽举行定制化传入参数，从而实现组件的复用。
插槽作用：让组件内部的一些布局支持自界说。

二、默认插槽

2.1. 默认插槽根本语法

1. 组件内须要定制的布局部分，改用<slot></slot>占位
2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入布局更换slot

2.2. 完备代码 

2.2.1. main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')
复制代码
2.2.2. App.vue

  1. <template>
  2.   <div>
  3.     <!-- 2. 在使用组件时，组件标签内填入内容 -->
  4.     <MyDialog>
  5.       <div>你确认要删除么</div>
  6.     </MyDialog>
  8.     <MyDialog>
  9.       <p>你确认要退出么</p>
  10.     </MyDialog>
  11.   </div>
  12. </template>
  14. <script>
  15. import MyDialog from './components/MyDialog.vue'
  16. export default {
  17.   data () {
  18.     return {
  20.     }
  21.   },
  22.   components: {
  23.     MyDialog
  24.   }
  25. }
  26. </script>
  28. <style>
  29. body {
  30.   background-color: #b3b3b3;
  31. }
  32. </style>
复制代码
2.2.3. MyDialog.vue

  1. <template>
  2.   <div class="dialog">
  3.     <div class="dialog-header">
  4.       <h3>友情提示</h3>
  5.       <span class="close">✖️</span>
  6.     </div>
  8.     <div class="dialog-content">
  9.       <!-- 1. 在需要定制的位置，使用slot占位 -->
  10.       <slot></slot>
  11.     </div>
  12.     <div class="dialog-footer">
  13.       <button>取消</button>
  14.       <button>确认</button>
  15.     </div>
  16.   </div>
  17. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  24.     }
  25.   }
  26. }
  27. </script>
  29. <style scoped>
  30. * {
  31.   margin: 0;
  32.   padding: 0;
  33. }
  34. .dialog {
  35.   width: 470px;
  36.   height: 230px;
  37.   padding: 0 25px;
  38.   background-color: #ffffff;
  39.   margin: 40px auto;
  40.   border-radius: 5px;
  41. }
  42. .dialog-header {
  43.   height: 70px;
  44.   line-height: 70px;
  45.   font-size: 20px;
  46.   border-bottom: 1px solid #ccc;
  47.   position: relative;
  48. }
  49. .dialog-header .close {
  50.   position: absolute;
  51.   right: 0px;
  52.   top: 0px;
  53.   cursor: pointer;
  54. }
  55. .dialog-content {
  56.   height: 80px;
  57.   font-size: 18px;
  58.   padding: 15px 0;
  59. }
  60. .dialog-footer {
  61.   display: flex;
  62.   justify-content: flex-end;
  63. }
  64. .dialog-footer button {
  65.   width: 65px;
  66.   height: 35px;
  67.   background-color: #ffffff;
  68.   border: 1px solid #e1e3e9;
  69.   cursor: pointer;
  70.   outline: none;
  71.   margin-left: 10px;
  72.   border-radius: 3px;
  73. }
  74. .dialog-footer button:last-child {
  75.   background-color: #007acc;
  76.   color: #fff;
  77. }
  78. </style>
复制代码
2.3. 运行效果


三、插槽后备内容（默认值）

3.1. 插槽后备内容根本语法

我们通过插槽实现内容的定制，同时插槽还支持设定默认的内容，即插槽后备内容。我们在封装组件时，可以为预留的`<slot>` 插槽提供后备内容（默认内容）。
外部使用组件时，不传东西，则slot会体现后备内容

外部使用组件时，传东西了，则slot团领会被换掉

3.2. 完备代码 

3.2.1. main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')
复制代码
3.2.2. App.vue

  1. <template>
  2.   <div>
  3.     <MyDialog>
  4.     </MyDialog>
  6.     <MyDialog>
  7.       <p>你确认要退出么</p>
  8.     </MyDialog>
  9.   </div>
  10. </template>
  12. <script>
  13. import MyDialog from './components/MyDialog.vue'
  14. export default {
  15.   data () {
  16.     return {
  18.     }
  19.   },
  20.   components: {
  21.     MyDialog
  22.   }
  23. }
  24. </script>
  26. <style>
  27. body {
  28.   background-color: #b3b3b3;
  29. }
  30. </style>
复制代码
3.2.3. MyDialog.vue

  1. <template>
  2.   <div class="dialog">
  3.     <div class="dialog-header">
  4.       <h3>友情提示</h3>
  5.       <span class="close">✖️</span>
  6.     </div>
  8.     <div class="dialog-content">
  9.       <!-- 插槽默认显示的内容 -->
  10.       <slot>插槽默认显示的内容</slot>
  11.     </div>
  12.     <div class="dialog-footer">
  13.       <button>取消</button>
  14.       <button>确认</button>
  15.     </div>
  16.   </div>
  17. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  24.     }
  25.   }
  26. }
  27. </script>
  29. <style scoped>
  30. * {
  31.   margin: 0;
  32.   padding: 0;
  33. }
  34. .dialog {
  35.   width: 470px;
  36.   height: 230px;
  37.   padding: 0 25px;
  38.   background-color: #ffffff;
  39.   margin: 40px auto;
  40.   border-radius: 5px;
  41. }
  42. .dialog-header {
  43.   height: 70px;
  44.   line-height: 70px;
  45.   font-size: 20px;
  46.   border-bottom: 1px solid #ccc;
  47.   position: relative;
  48. }
  49. .dialog-header .close {
  50.   position: absolute;
  51.   right: 0px;
  52.   top: 0px;
  53.   cursor: pointer;
  54. }
  55. .dialog-content {
  56.   height: 80px;
  57.   font-size: 18px;
  58.   padding: 15px 0;
  59. }
  60. .dialog-footer {
  61.   display: flex;
  62.   justify-content: flex-end;
  63. }
  64. .dialog-footer button {
  65.   width: 65px;
  66.   height: 35px;
  67.   background-color: #ffffff;
  68.   border: 1px solid #e1e3e9;
  69.   cursor: pointer;
  70.   outline: none;
  71.   margin-left: 10px;
  72.   border-radius: 3px;
  73. }
  74. .dialog-footer button:last-child {
  75.   background-color: #007acc;
  76.   color: #fff;
  77. }
  78. </style>
复制代码
3.3. 运行效果


四、具名插槽

前面我们讲的默认插槽，它只支持组件内只有一处内容差异须要自界说的环境。但我们在现实开发过程中常常会遇到组件中有多处内容差异须要自界说，这时我们可以使用具名插槽来实现。
  下面的提示框我们可以看到除了提示语差异外，提示框的标题也差异：  
4.1. 具名插槽语法

1. 多个slot使用name属性区分名字
2. template共同v-slot:名字来分发对应标签

4.2. 完备代码 

4.2.1. main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')
复制代码
4.2.2. App.vue

  1. <template>
  2.   <div>
  3.     <MyDialog>
  4.       <!-- 需要通过template标签包裹需要分发的结构，包成一个整体 -->
  5.       <template v-slot:head>
  6.         <div>我是大标题</div>
  7.       </template>
  8.       
  9.       <template v-slot:content>
  10.         <div>我是内容</div>
  11.       </template>
  13.       <template #footer>
  14.         <button>取消</button>
  15.         <button>确认</button>
  16.       </template>
  17.     </MyDialog>
  18.   </div>
  19. </template>
  21. <script>
  22. import MyDialog from './components/MyDialog.vue'
  23. export default {
  24.   data () {
  25.     return {
  27.     }
  28.   },
  29.   components: {
  30.     MyDialog
  31.   }
  32. }
  33. </script>
  35. <style>
  36. body {
  37.   background-color: #b3b3b3;
  38. }
  39. </style>
复制代码
4.2.3. MyDialog.vue

  1. <template>
  2.   <div class="dialog">
  3.     <div class="dialog-header">
  4.       <!-- 一旦插槽起了名字，就是具名插槽，只支持定向分发 -->
  5.       <slot name="head"></slot>
  6.     </div>
  8.     <div class="dialog-content">
  9.       <slot name="content"></slot>
  10.     </div>
  11.     <div class="dialog-footer">
  12.       <slot name="footer"></slot>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   data () {
  20.     return {
  22.     }
  23.   }
  24. }
  25. </script>
  27. <style scoped>
  28. * {
  29.   margin: 0;
  30.   padding: 0;
  31. }
  32. .dialog {
  33.   width: 470px;
  34.   height: 230px;
  35.   padding: 0 25px;
  36.   background-color: #ffffff;
  37.   margin: 40px auto;
  38.   border-radius: 5px;
  39. }
  40. .dialog-header {
  41.   height: 70px;
  42.   line-height: 70px;
  43.   font-size: 20px;
  44.   border-bottom: 1px solid #ccc;
  45.   position: relative;
  46. }
  47. .dialog-header .close {
  48.   position: absolute;
  49.   right: 0px;
  50.   top: 0px;
  51.   cursor: pointer;
  52. }
  53. .dialog-content {
  54.   height: 80px;
  55.   font-size: 18px;
  56.   padding: 15px 0;
  57. }
  58. .dialog-footer {
  59.   display: flex;
  60.   justify-content: flex-end;
  61. }
  62. .dialog-footer button {
  63.   width: 65px;
  64.   height: 35px;
  65.   background-color: #ffffff;
  66.   border: 1px solid #e1e3e9;
  67.   cursor: pointer;
  68.   outline: none;
  69.   margin-left: 10px;
  70.   border-radius: 3px;
  71. }
  72. .dialog-footer button:last-child {
  73.   background-color: #007acc;
  74.   color: #fff;
  75. }
  76. </style>
复制代码
五、作用域插槽 

我们在企业级项目开发过程中，常常会遇到PC端管理背景中有些列表的列头和列题在差异的条件下会动态的变更，以外的开发实现上大概会使用判定条件语句来实现，假如动态变更的种类条件许多的环境下，代码就会相当复杂和冗余。别的尚有列表中最右侧列，有些满是查察按钮，有些满是删除按钮。在Vue中，这些需求通过作用域插槽实现起来就非常简便。
使用具名插槽结相助用域插槽实现动态表格：

 使用默认插槽结相助用域插槽实现动态使用按钮：

留意：作用域插槽并不是插槽的一个种类，插槽只有默认插槽和具名插槽两种。作用域插槽它是插槽的一种传参语法。
作用域插槽的意思是在界说 slot 插槽的时间, 我们还可以传值。给插槽上可以绑定命据，未来使用组件时可以用。
如下的场景需求：封装表格组件

5.1. 作用域插槽语法

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

2. 全部添加的属性, 都会被网络到一个对象中

3. 在父组件的template中, 通过 ` #插槽名= "obj" ` 吸取子组件中插槽的传值，默认插槽名为default

5.2. 完备代码 

 5.2.1. main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')
复制代码
5.2.2. App.vue 

  1. <template>
  2.   <div>
  3.     <MyTable :data="list">
  4.       <!-- 3. 通过template #插槽名="变量名" 接收 MyTable插槽的传参，传过来的参数是个如下形式的obj -->
  5.       <!-- {
  6.                row: { id: 2, name: '孙红雷', age: 19 },
  7.                msg: '测试文本'
  8.              } -->
  9.       <template #default="obj">
  10.         <button @click="del(obj.row.id)">
  11.           删除
  12.         </button>
  13.       </template>
  14.     </MyTable>
  15.    
  16.     <MyTable :data="list2">
  17.       <!-- { row } 为直接从obj从解构出来的对象 -->
  18.       <template #default="{ row }">
  19.         <button @click="show(row)">查看</button>
  20.       </template>
  21.     </MyTable>
  22.   </div>
  23. </template>
  25. <script>
  26. import MyTable from './components/MyTable.vue'
  27. export default {
  28.   data () {
  29.     return {
  30.       list: [
  31.         { id: 1, name: '李沁', age: 18 },
  32.         { id: 2, name: '虞书欣', age: 19 },
  33.         { id: 3, name: '新垣结衣', age: 17 },
  34.       ],
  35.       list2: [
  36.         { id: 1, name: '胡歌', age: 18 },
  37.         { id: 2, name: '朱一龙', age: 19 },
  38.         { id: 3, name: '刘烨', age: 17 },
  39.       ]
  40.     }
  41.   },
  42.   methods: {
  43.     del (id) {
  44.       this.list = this.list.filter(item => item.id !== id)
  45.     },
  46.     show (row) {
  47.       // console.log(row);
  48.       alert(`姓名：${row.name}; 年纪：${row.age}`)
  49.     }
  50.   },
  51.   components: {
  52.     MyTable
  53.   }
  54. }
  55. </script>
复制代码
5.2.3. MyTable.vue 

  1. <template>
  2.   <table class="my-table">
  3.     <thead>
  4.       <tr>
  5.         <th>序号</th>
  6.         <th>演员</th>
  7.         <th>年纪</th>
  8.         <th>操作</th>
  9.       </tr>
  10.     </thead>
  11.     <tbody>
  12.       <tr v-for="(item, index) in data" :key="item.id">
  13.         <td>{{ index + 1 }}</td>
  14.         <td>{{ item.name }}</td>
  15.         <td>{{ item.age }}</td>
  16.         <td>
  17.           <!-- 1. 给slot标签，添加多个属性的方式传值 -->
  18.           <slot :row="item" msg="测试文本"></slot>
  20.           <!-- 2. 将所有的属性，添加到一个对象中 -->
  21.           <!--
  22.              {
  23.                row: { id: 2, name: '孙大明', age: 19 },
  24.                msg: '测试文本'
  25.              }
  26.            -->
  27.         </td>
  28.       </tr>
  29.     </tbody>
  30.   </table>
  31. </template>
  33. <script>
  34. export default {
  35.   props: {
  36.     data: Array
  37.   }
  38. }
  39. </script>
  41. <style scoped>
  42. .my-table {
  43.   width: 450px;
  44.   text-align: center;
  45.   border: 1px solid #ccc;
  46.   font-size: 24px;
  47.   margin: 30px auto;
  48. }
  49. .my-table thead {
  50.   background-color: #1f74ff;
  51.   color: #fff;
  52. }
  53. .my-table thead th {
  54.   font-weight: normal;
  55. }
  56. .my-table thead tr {
  57.   line-height: 40px;
  58. }
  59. .my-table th,
  60. .my-table td {
  61.   border-bottom: 1px solid #ccc;
  62.   border-right: 1px solid #ccc;
  63. }
  64. .my-table td:last-child {
  65.   border-right: none;
  66. }
  67. .my-table tr:last-child td {
  68.   border-bottom: none;
  69. }
  70. .my-table button {
  71.   width: 65px;
  72.   height: 35px;
  73.   font-size: 18px;
  74.   border: 1px solid #ccc;
  75.   outline: none;
  76.   border-radius: 3px;
  77.   cursor: pointer;
  78.   background-color: #ffffff;
  79.   margin-left: 5px;
  80. }
  81. </style>
复制代码

 
回复

使用道具 举报

返回列表

西河刘卡车医
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表