//定义组件 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>

注意事项

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
v-slot 指令的使用区别与其他指令的语法形式
- v-if= “”
- v-slot:插槽名 (vue @2.6+版本新语法)

标签：Slot,Vue,title,作用域,插槽,内容,组件,Card
来源： https://blog.csdn.net/bubu212/article/details/121803688

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue-Slot 插槽详解

什么是插槽

定义

插槽的作用

插槽的分类

默认插槽

具名插槽

作用域插槽

注意事项