Vue插槽

正常我们调用组件的时候  肯定不希望一个组件写死了  或者进入这个组件修改各个内容

这对于组件的复用性 不太好

在这里我给大家讲一下 Vue的插槽用法

组件 -----插槽

以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式

之前的折叠面板案例的组件我们拿过来 

Pannel.vue 内容如下

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

App.vue来调用它

<template>
  <div>
    <Pannel></Pannel>
  </div>
</template>

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

<style>
</style>

 这些语法 要自我熟练起来 不然 以后操作 就会越来越难