Vue插槽(Slot)使用简明笔记

插槽Solt

1、什么是插槽：

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

2、默认插槽：

默认插槽是插槽最基本的方式：
首先在父组件App.Vue中引入子组件，并在引入的子组件标签内插入需要的html元素，在子组件中把需要用插槽的地方用标签替代

2.1 父组件

    <MySlot title="一个标题">
      <ul>
        <li v-for="(g, index) in games" :key="index">{{ g }}li>
      ul>
    MySlot>

数据

  data() {
    return { 
      games: ["英雄联盟", "炉石传说", "穿越火线", "QQ飞车", "吃鸡"]
    };
  },

2.2 子组件

<template>
    
    <div class="box">
      <h4>{{title}}h4>
      <slot>slot>
    div>
  template>

  <script>
  export default {
      name:'MySlot',
      props:['title'],
  }
  </script>

2.3效果

3、具名插槽

简单来说，所谓的具名插槽就是有名字的插槽
那它和默认插槽有什么不同呢？
有时候我们会遇到这种场景，在一个组件中，我们虽然可以复用组件的结构，但是往往，有时候我们会遇到一个组件多用，但是结构稍微有所差别的情况，这时，就会用得到具名插值。

3.1 父组件

<MySlotJm title="传入一个标题">
      
      <template slot="one">
        <ul>
          <li v-for="(g, index) in games" :key="index">{{ g }}li>
        ul>
      template>
      
      <template v-slot:tow>
        <a href="#">官网由此进入a>
      template>
    MySlotJm>

3.2 子组件

<template>
  
  <div class="box">
    <h4>{{ title }}h4>
    
    <slot name="one">slot>
    <slot name="tow">slot>
  div>
template>

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

3.3 效果

4、作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，也就是说，作用域插槽的不同之处就在于，数据不在父组件身上，而是在子组件身上，且组件的结构和内容由父组件决定。作用域组件限定了组件内结构和数据的展示范围，以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。

4.1 父组件

     
    <MySlotZyy title="标题-第一种结构"  > 
      
        <template slot-scope="data">
         <ul>
            <li v-for="(d,index) in data.mList" :key="index">{{ d }}li>
         ul>
      template>
      MySlotZyy>
          
      <MySlotZyy title="标题-第二种结构"  > 
        <template slot-scope="data">
         <ol>
            <li v-for="(d,index) in data.mList" :key="index">{{ d }}li>
         ol>
      template>
      MySlotZyy>

4.2 子组件

<template>
  
  <div class="box">
    <h4>{{title}}h4>
    
    
    <slot :mList="movies">slot>
  div>
template>

  <script>
export default {
  name: "MySlotZyy",
  props: ["title"],
  data(){
    return{
      movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']

    }
  }

};
</script>

4.3效果