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+版本新语法)