devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue 插槽

作者：Cpp五条 | 2024-05-07 09:35:47

赞

踩

Vue 插槽

Vue插槽是一种特殊的语法，用于在组件中定义可复用的模板部分。它允许开发者在组件的标记中声明一个或多个插槽，然后在使用该组件时，可以根据自己的需求将内容插入到这些插槽中。

Vue插槽分为默认插槽和具名插槽两种。

默认插槽

语法

  1. 组件内需要自定义的结构部分，改用<slot></slot>占位
  2. 使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot

案例

要在页面中显示一个对话框，封装成一个组件，组件内容能够自定义

MyDialog.vue

  1. <template>
  2.   <div class="dialog">
  3.     <div class="dialog-header">
  4.       <h3>友情提示</h3>
  5.       <span class="close">✖️</span>
  6.     </div>
  7.  
  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>
  18.  
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  23.  
  24.     }
  25.   }
  26. }
  27. </script>
  28.  
  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>

App.vue

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

main.js

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

后备内容 （默认值）

设置插槽默认显示内容

语法

在<slot>标签内，放置内容，作为默认显示内容

外部使用组件时，不传内容，则会显示后备内容，否则后备内容被替换

案例

MyDialog.vue

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

App.vue

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

main.js

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

具名插槽

默认插槽只有一个定制位置

具名插槽支持多个定制位置

语法

  1. 多个<slot>标签使用name属性区分名字
  2. template配合v-slot:名字来分发对应标签
  3. v-slot:可以简化成#

案例

MyDialog.vue

  1. <template>
  2.   <div class="dialog">
  3.     <div class="dialog-header">
  4.       <!-- 一旦插槽起了名字，就是具名插槽，只支持定向分发 -->
  5.       <slot name="head"></slot>
  6.     </div>
  7.  
  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>
  16.  
  17. <script>
  18. export default {
  19.   data () {
  20.     return {
  21.  
  22.     }
  23.   }
  24. }
  25. </script>
  26.  
  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>

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>
  12.  
  13.       <template #footer>
  14.         <button>取消</button>
  15.         <button>确认</button>
  16.       </template>
  17.     </MyDialog>
  18.   </div>
  19. </template>
  20.  
  21. <script>
  22. import MyDialog from './components/MyDialog.vue'
  23. export default {
  24.   data () {
  25.     return {
  26.  
  27.     }
  28.   },
  29.   components: {
  30.     MyDialog
  31.   }
  32. }
  33. </script>
  34.  
  35. <style>
  36. body {
  37.   background-color: #b3b3b3;
  38. }
  39. </style>

main.js

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

作用域插槽

给插槽绑定数据

案例

封装表格组件

  1. 父传子，动态渲染表格内容
  2. 利用默认插槽，定制操作列

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>
  19.  
  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>
  32.  
  33. <script>
  34. export default {
  35.   props: {
  36.     data: Array
  37.   }
  38. }
  39. </script>
  40.  
  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>

 App.vue

  1. <template>
  2.   <div>
  3.     <MyTable :data="list">
  4.       <!-- 3. 通过template #插槽名="变量名" 接收 -->
  5.       <template #default="obj">
  6.         <button @click="del(obj.row.id)">
  7.           删除
  8.         </button>
  9.       </template>
  10.     </MyTable>
  11.     
  12.     <MyTable :data="list2">
  13.       <template #default="{ row }">
  14.         <button @click="show(row)">查看</button>
  15.       </template>
  16.     </MyTable>
  17.   </div>
  18. </template>
  19.  
  20. <script>
  21. import MyTable from './components/MyTable.vue'
  22. export default {
  23.   data () {
  24.     return {
  25.       list: [
  26.         { id: 1, name: '张小花', age: 18 },
  27.         { id: 2, name: '孙大明', age: 19 },
  28.         { id: 3, name: '刘德忠', age: 17 },
  29.       ],
  30.       list2: [
  31.         { id: 1, name: '赵小云', age: 18 },
  32.         { id: 2, name: '刘蓓蓓', age: 19 },
  33.         { id: 3, name: '姜肖泰', age: 17 },
  34.       ]
  35.     }
  36.   },
  37.   methods: {
  38.     del (id) {
  39.       this.list = this.list.filter(item => item.id !== id)
  40.     },
  41.     show (row) {
  42.       // console.log(row);
  43.       alert(`姓名：${row.name}; 年纪：${row.age}`)
  44.     }
  45.   },
  46.   components: {
  47.     MyTable
  48.   }
  49. }
  50. </script>

 main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3.  
  4. Vue.config.productionTip = false
  5.  
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/548502
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号