Vue 插槽之插槽内容学习总结

  • A+
所属分类:Web前端
摘要

父组件中引用支持插槽内容的子组件,形如以下(假设子组件为NavigationLink.vue)


插槽内容使用方法介绍

父组件中引用支持插槽内容的子组件,形如以下(假设子组件为NavigationLink.vue)

<navigation-link url="/profile">   Your Profile </navigation-link> 

然后在子组件<template> 模板中使用<slot></slot>,形如以下:

<a   v-bind:href="url"   class="nav-link" >   <slot></slot> </a> 

这样以后,当组件渲染的时候,子组件中的<slot></slot> 将会被替换为父组件模板中,子组件起始标签和结束标签之间的内容--这里称之为“插槽内容”。

插槽内可以包含任何模板代码,包括 HTML:

<navigation-link url="/profile">   <!-- 添加一个 Font Awesome 图标 -->   <span class="fa fa-user"></span>   Your Profile </navigation-link> 

甚至其它的组件:

<navigation-link url="/profile">   <!-- 添加一个图标的组件 -->   <font-awesome-icon name="user"></font-awesome-icon>   Your Profile </navigation-link> 

如果子组件 template没有包含一个 <slot> 元素,则父组件中,该组件起始标签和结束标签之间的任何内容都会被抛弃

应用举例

需求描述

自定义卡片组件,用于展示不同的内容,形式为 显示卡片标题和内容,卡片和卡片之间看起来需要有“分界条”

Testpage.vue

<template>   <div class="page-main">     <div class="main-content">       <card class="authors-single" title="测试标签1">         <div style="height:50px;width:60px">hello</div>       </card>       <card class="authors-single" title="测试标签2">           <div>卡片内容</div>       </card>     </div>   </div> </template>  <script> import Card from "@/components/Card";  export default {   components: { Card }, }; </script>  <style scoped lang="scss"> .page-main {   height: calc(100vh - 129px);   padding: 10px 10px;   display: flex;   flex-direction: column;   .main-content {     overflow: auto;     flex: auto;   } } </style> 

Card.vue

组件路径位于@/components/Card/Card.vue

<template>   <div class="card">     <div class="card-title">{{title}}</div>     <div class="card-content">       <slot></slot>     </div>   </div> </template>  <script> export default {   props: {     title: {       type: String     }   } } </script>  <style lang="scss" scoped> .card {   display: flex;   flex-direction: column;   padding: 2px 5px;    &-title {     flex: none;     padding: 0.4em 8px;     font-size: 17px;     position: relative;     background-color: #f8f8f8;      &::before {       content: "";       width: 4px;       height: 100%;       background: #59bcc7;       position: absolute;       top: 0;       left: 0;     }   }    &-content {     flex: auto;     padding: 10px;     margin-top: 10px;     background-color: #f8f8f8;   } } </style> 

效果

Vue 插槽之插槽内容学习总结

参考连接

https://cn.vuejs.org/v2/guide/components-slots.html#插槽内容