组件-插槽

插槽

0. 作用：通过slot标签，让组件可以接收不同的标签结构显示

1. 语法

   • 组件内用占位
   • 使用组件时夹着的地方，传入标签替换slot

插槽-默认内容

0. 作用： 如果外面没有传值，可以给个默认显示内容

1. 语法：放置内容，作为默认显示内容

2. 效果：

   • 不给组件传标签，slot内容原地显示

   • 给组件内传标签，则slot整体被换掉

      <template>
        <div id="container">
          <div id="app">
            <h3>案例：折叠面板</h3>
            <Pannel>
              <p>寒雨连江夜入吴,</p>
              <p>平明送客楚山孤。</p>
              <p>洛阳亲友如相问，</p>
              <p>一片冰心在玉壶。</p>
            </Pannel>
            <Pannel>
              <img src="./assets/mm.gif" alt="">
              <p>这是一只可爱的猫咪</p>
            </Pannel>
            <Pannel>
              <p>我是默认内容</p>
            </Pannel>
          </div>
        </div>
      </template>
      ​
      <script>
        import Pannel from './components/Pannel.vue'
        export default {
          components: {
            Pannel,
          }
        };
      </script>
      ​
      <style>
        #app {
          width: 400px;
          margin: 20px auto;
          background-color: #fff;
          border: 4px solid blueviolet;
          border-radius: 1em;
          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
          padding: 1em 2em 2em;
        }
      </style>
     

     子组件：

      <template>
        <div>
          <!-- 按钮标题 -->
          <div class="title">
            <h4>芙蓉楼送辛渐</h4>
            <span class="btn" @click="isShow = !isShow">
              {{ isShow ? "收起" : "展开" }}
            </span>
          </div>
          <!-- 下拉内容 -->
          <div class="container" v-show="isShow">
            <slot></slot>
          </div>
        </div>
      </template>
      ​
      <script>
      export default {
        data() {
          return {
            isShow: false,
          };
        },
      };
      </script>
      ​
      <style scoped>
      h3 {
        text-align: center;
      }
      ​
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 0 1em;
      }
      ​
      .title h4 {
        line-height: 2;
        margin: 0;
      }
      ​
      .container {
        border: 1px solid #ccc;
        padding: 0 1em;
      }
      ​
      .btn {
        /* 鼠标改成手的形状 */
        cursor: pointer;
      }
      ​
      img {
        width: 50%;
      }
      </style>
     

具名插槽

0. 作用： 一个组件内有两处以上需要外部传入标签的地方，插入

1. 语法：

   • 给slot标签添加一个name属性，起名宇
   • 在使用组件时，通过template配合v-slot指定对应 的名字
   • 最终运行的效果：将template指定名字的标签插入到对 应s1ot占位的地方

 <template>
   <div id="app">
     <h3>折叠面板</h3>
     <Panel>
       <template v-slot:title>
         <h3>芙蓉楼送辛渐</h3>
       </template>
 ​
       <template v-slot:content>
         <p>寒雨连江夜入吴，</p>
         <p>平明送客楚山孤。</p>
         <p>洛阳亲友如相问，</p>
         <p>一片冰心在玉壶。</p>
       </template>
     </Panel>
     <Panel>
       <!-- v-slot: 可以简写为 # -->
       <template #title>
         <h3>可爱的猫猫看着你</h3>
       </template>
       <template #content>
         <img src="./assets/mm.gif" alt="">
         <p>这是一只可爱的 mm</p>
       </template>
     </Panel>
     <Panel></Panel>
   </div>
 </template>
 ​
 <script>
 import Panel from './components/Panel.vue'
 ​
 export default {
   components: {
     Panel
   },
 ​
   data() {
     return {
       
     }
   }
 }
 </script>
 ​
 <style lang="less">
 body {
   background-color: #ccc;
   #app {
     width: 400px;
     margin: 20px auto;
     background-color: #fff;
     border: 4px solid blueviolet;
     border-radius: 1em;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
     padding: 1em 2em 2em;
     h3 {
       text-align: center;
     }
   }
 }
 </style>