vue slot 组件插槽

插槽 - 创建

1. 简介：让组件内可以接收不同的标签显示

效果

步骤

1. 先在组件内用 slot 占位
2. 使用组件时,传入具体标签插入
3. 过程：传入的标签会替换掉 slot 显示

代码

// Pannel.vue
<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <h4>Slot - 展示插槽</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>

// UseSlot.vue
<template>
  <div id="container">
    <div id="app">
      <Pannel>
        <img src="../assets/fight.gif" alt />
        <span>加油，把公司干倒！</span>
      </Pannel>
      <Pannel>
        <p>加油，把公司干倒！</p>
        <p>加油，把公司干倒！</p>
        <p>加油，把公司干倒！</p>
        <p>加油，把公司干倒！</p>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from '../components/Pannel.vue'
export default {
   
  components: {
   
    Pannel
  }
};
</script>

插槽 - 显示默认内容

• 需求：不给组件传标签
• 效果：<slot>内放置内容,作为默认显示内容；给组件内传标签，则slot整体被换掉

效果

代码

// Pannel.vue
<template>
  <div>
    <!-- 按钮标题 -->
    <