Vue-Slot 插槽详解

最新推荐文章于 2024-07-26 13:02:41 发布

进击的布布

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量491

点赞数

分类专栏： Vue基础系列文章标签： vue.js javascript 前端前端框架开发语言

本文链接：https://blog.csdn.net/bubu212/article/details/121803688

版权

Vue基础系列专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的插槽机制，包括插槽的定义、作用和分类，如默认插槽、具名插槽和作用域插槽，强调了插槽在组件间灵活传递内容和状态数据的重要作用，并提到了在使用时的注意事项，如v-slot的新语法和作用域的区分。

摘要由CSDN通过智能技术生成

什么是插槽

定义

实现功能

将自定义内容插入组件中指定的位置

自定义内容（包括不限于以下）

HTML代码
文本内容
组件 ..

插槽的作用

父组件，子组件的状态数据传递 (作用域插槽)
提供灵活的，私人订制版组件

插槽的分类

默认插槽

代码

//定义组件 Card 
<template>
  <div class="cardContainer">
    <h3>Card组件</h3>
    <slot>我是一个插槽</slot>
  </div>
</template>

/****************************************/

//父组件使用Card组件
<template>
  <div id="app">
    //使用Card组件
    <Card>
      <template>
        //模板中的内容会替换 Card 组件中 <slot></slot>内容
      </template>
    </Card>
  </div>
</template>

具名插槽

代码

//Vue解析模版时，默认情况下，未指定名称的插槽默认值为default
//同一个组件中，存在多个未命名插槽，当仅使用一个时，会将内容插入所有插槽中

//定义具名插槽
<template>
  <div class="cardContainer">
    <slot name="content"> 我是插槽1 </slot>
    <h4>更多内容 敬请关注...</h4>
    <slot name="footer">我是个插槽2</slot>
  </div>
</template>


//使用具名插槽
<template>
  <div id="app">
    <Card title="电影">
      <!--  v-slot:插槽名 -->
      <template v-slot:content>
        我在使用名称：content的插槽
      </template>
    </Card>
  </div>
</template>

作用域插槽

使用场景

父组件在向插槽中插入内容时需要使用子组件中定义的数据时

//作用域插槽 子组件
<template>
  <div class="cardContainer">
    <h3>{{ title }}</h3>
    <slot name="content" :content="content"> 我是插槽1 </slot>
    <!-- 设置一个插槽 -->
    <h4>更多内容 敬请关注...</h4>
    <slot name="footer">我是个插槽2</slot>
    <span></span>
  </div>
</template>
<script>
export default {
  name: "Card",
  data() {
    return {};
  },
  props: {
    title: String,
  },
  computed: {
    content() {
      if (this.title === "电影") {
        return ["恐怖", "惊悚", "喜剧"];
      }
      if (this.title === "游戏") {
        return ["单机", "联机"];
      }
    },
  },
};
</script>
<style scoped>
.cardContainer {
  width: 400px;
  margin-left: 20px;
  background-color: aquamarine;
}
h3 {
  text-align: center;

  background-color: bisque;
}
</style>

父组件

<template>
  <div id="app">
    <Card title="电影">
      <!-- v-slot:插槽名="插槽属性绑定值 ，类型 Object" -->
      <template v-slot:content="contentInfo">
        <ul>
          <li v-for="item in contentInfo.content" :key="item">{{ item }}</li>
        </ul>
      </template>
    </Card>
    <Card title="游戏">
      <template v-slot:content>
        <ol>
          <li>单机</li>
          <li>联机</li>
        </ol>
      </template>
    </Card>
  </div>
</template>

<script>
import Card from "./components/slot组件/Card";

export default {
  name: "App",
  components: {
    Card,
  },
  mounted() {},
};
</script>

<style>
#app {
  display: flex;
  justify-content: space-around;
}
</style>