1.组件插槽

1.  组件内用<slot></slot>占位
2.  使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot插槽

App.vue代码

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <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>

子组件代码:

<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>

3.插槽默认内容

如果外面不给传, 想给个默认显示内容,直接写在slot标签里面即可

<slot>默认内容</slot>

4.具名插槽

当一个组件内有2处以上需要外部传入标签的地方可以使用具名插槽

语法:

v-slot:

可以简写为#

App.vue代码

<template>
  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <template #title>
            <h4>霜月</h4>
        </template>
        <template #content>
          <p>初闻征雁已无蝉，</p>
          <p>百尺楼高水接天。</p>
          <p>青女素娥俱耐冷，</p>
          <p>月中霜里斗婵娟。</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

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

子组件代码

<template>
  <div>
    <!-- 按钮标题 -->
    <div class="title">
      <!-- <h4>芙蓉楼送辛渐</h4> -->
      <slot name='title'></slot>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <!-- 下拉内容 -->
    <div class="container" v-show="isShow">
      <slot name='content'>
          <!-- 
          <p>寒雨连江夜入吴,</p>
          <p>平明送客楚山孤。</p>
          <p>洛阳亲友如相问，</p>
          <p>一片冰心在玉壶。</p> 
          -->
      </slot>
    </div>
  </div>
</template>

4.作用域插槽

1. 子组件, 在slot上绑定属性和子组件内的值
2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
3. scope变量名自动绑定slot上所有属性和值 App.vue代码

<template>
  <div>
    <Son>
      <template #Arr="scope">
        <div>
          {{ scope.row }}
        </div>
      </template>
    </Son>
  </div>
</template>

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

子组件代码:

<template>
  <div>
    <slot :row='list'  name='Arr'></slot>
  </div>
</template>

<script>
export default {

  data() {
    return {
      list:['万叶','公子','钟离']
    };
  },
};
</script>
 

总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容