[JavaScript知识库]Vue.js插槽

普通插槽

<!-- son.vue 组件 -->
<template>
  <div class="sslot">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: ["title"],
  };
</script>

<style lang="scss" scoped>
  .sslot {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
</style>

<!-- Home.vue -->
<template>
  <div class="home">
    <myson title="普通插槽">
      <!-- 组件的插槽位 -->
      <h2>插槽位置</h2>
    </myson>
  </div>
</template>

<script>
  import myson from "@/components/son.vue";
  export default {
    name: "son",
    components: {
      myson,
    },
  };
</script>

<style lang="scss" scoped>
  .home {
    display: flex;
    justify-content: space-around;
  }
</style>

具名插槽

<!-- son.vue 组件 -->
<template>
  <div class="sslot">
    <h3>{{ title }}</h3>
    <slot name="first"></slot>
    <slot name="second"></slot>
  </div>
</template>

<script>
  export default {
    props: ["title"],
  };
</script>

<style lang="scss" scoped>
  .sslot {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
</style>

<!-- Home.vue -->
<template>
  <div class="home">
    <myson title="具名插槽">
      <!-- 组件的插槽位 -->
      <template v-slot:first>
        <h2>名字为first的插槽位置</h2>
      </template>
      <h2 slot="second">名字为second的插槽位置</h2>
    </myson>
  </div>
</template>

<script>
  import myson from "@/components/son.vue";
  export default {
    name: "son",
    components: {
      myson,
    },
  };
</script>

<style lang="scss" scoped>
  .home {
    display: flex;
    justify-content: space-around;
  }
</style>

作用域插槽

<!-- son.vue 数据在组件中，向组件的使用者传值 -->
<template>
  <div class="sslot">
    <h3>{{ title }}</h3>
    <slot :dataOfMyson="dataOfMyson"></slot>
  </div>
</template>

<script>
  export default {
    props: ["title"],
    data() {
      return {
        dataOfMyson: "son组件的数据",
      };
    },
  };
</script>

<style lang="scss" scoped>
  .sslot {
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
</style>

<!-- Home.vue -->
<template>
  <div class="home">
    <myson title="作用域插槽">
      <!-- 组件的插槽位 -->
      <!-- 2种写法，拿到的数据是对象 -->
      <!-- <template scope="dataOfMyson">
        <h2>插槽位置：{{ dataOfMyson.dataOfMyson }}</h2>
      </template> -->

      <template v-slot="{dataOfMyson}">
        <h2>插槽位置：{{ dataOfMyson }}</h2>
      </template>
    </myson>
  </div>
</template>

<script>
  import myson from "@/components/son.vue";
  export default {
    name: "son",
    components: {
      myson,
    },
  };
</script>

<style lang="scss" scoped>
  .home {
    display: flex;
    justify-content: space-around;
  }
</style>