vue的slot插槽

下面是slot使用方式，占坑是在子组件中，而填坑是在父组件

在子组件中占坑的方式：

 <slot name="footer"></slot>

   其中name：代表这个“坑”的名称（是slot的一个特殊的特性，代表标识），这个子组件中这两个，可以不全显示，也可以只显示一个，通过父组件来控制

子组件中：

<template>
<div>
  <slot name="footer"></slot>
  <slot name="header"></slot>
</div>
</template>

那么父组件中如何给对应的坑赋予某种功能？

利用 slot 另一种特性的用法： 直接用在一个普通的元素上

 

如：

 <p slot="footer">hello world</p>

  其中slot：代表这个标签内容是插槽的内容， footer：在子组件中你定义的“坑”的名称

可以给不同的“坑”定义不同的样式，标签结构以及布局等

父组件：

<template>
  <div>
    <HelloWorld>
      <p slot="footer" class="Success" v-show="flat">Here's some contact info</p>
      <p slot="header" class="Warning" v-show="flat2">123456</p>
    </HelloWorld>
    <button @click="handleClick1()">{{text1}}</button>
    <button @click="handleClick2()">{{text2}}</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  },
  data() {
    return {
      text1: "显示插槽1",
      text2: "显示插槽2",
      flat: false,
      flat2: false
    };
  },
  methods: {
    handleClick1() {
      if (!this.flat) {
        this.flat = true;
      } else {
        this.flat = false;
      }
    },
    handleClick2() {
      if (!this.flat2) {
        this.flat2 = true;
      } else {
        this.flat2 = false;
      }
    }
  }
};
</script>

<style>
.Success {
  font-size: 26px;
  color: green;
}

.Warning {
  font-size: 54px;
  color: firebrick;
}

.Error {
  font-size: 32px;
  color: red;
}
</style>