Vue-Slot 插槽详解

本文主要是介绍Vue-Slot 插槽详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

什么是插槽

定义

插槽的作用

插槽的分类

默认插槽

具名插槽

作用域插槽

注意事项

什么是插槽

定义

实现功能

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

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

• 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>
  ​

注意事项

• 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

• v-slot 指令的使用区别与其他指令的语法形式

  • v-if= “”

  • v-slot:插槽名 (vue @2.6+版本新语法)

这篇关于Vue-Slot 插槽详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！