vue2 ---- 插槽

什么是插槽

        子组件提供给父组件的占位符，用 slot 元素来表示，

        父组件可以在这个占位符里面填充各种模板代码。      

---

1. 匿名插槽：

        父组件引入子组件，在子组件内留 标签，

        就可以在父组件中的子组件标签中写入内容。

        例：

                父组件:

<template>
    <div>
        <h1>父组件</h1>
        <!-- 子组件标签 -->
        <Comp>
           <p>匿名插槽</p>
        </Comp>

    </div>
</template>

<script>
    import Comp from "./子组件.vue"
    export default {
         components:{
            Comp,
        },
        data(){
            return {};
        },
    }
</script>

<style lang="less" scoped>

</style>

        子组件：

<template>
    <div>
        <p>子组件</p>
        <--  slot 占位符  -->
        <slot></slot>   
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="less" scoped>

</style>

---

2. 具名插槽：

        子组件内的 标签添加 name 属性，

        父组件写入内容时，在子组件标签内用 v-slot:插槽名称 属性，便可将数据放在指定位置 ( 简写 #插槽名称 )

        例：

                父组件：

<template>
    <div>
        <h1>父组件</h1>
        <!-- 子组件标签 -->
        <Comp>    
            <p>匿名插槽</p>
            
            <template v-slot:top>
                <div >具名插槽-top</div>
            </template>
            
            <template #footer>
                <div >具名插槽-footer</div>
            </template>
        </Comp>

    </div>
</template>

<script>
    import Comp from "./子组件.vue"    
    export default {
        data(){
            return {};
        },
        components:{
            Comp,
        },
    }
</script>

<style lang="less" scoped></style>

                子组件：

<template>
    <div>
        <p>子组件</p>
        <slot name="top"> 具名插槽 </slot> 
        <slot></slot>
        <slot name="footer"> 具名插槽  </slot>    
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="less" scoped></style>

---

3. 作用域插槽：

        能传递数据，父组件可以接收子组件传递的数据

        格式：v-slot : 插槽名称 = “ props ”

        例：

                父组件：

<template>
  <div>
    <h1>父组件</h1>
    <Comp>
      <p>匿名插槽</p>
        <!-- 子组件传递的值存入自定义变量 -->
      <template v-slot:top="props"> 
        <div>
          <p>具名插槽-top</p>
        </div>
        <!-- 通过自定义变量引出子组件传入数据 -->
        <p>tex1: {{ props.text1 }}</p>  
      </template>

      <template #footer="NewProps">
        <div>具名插槽-footer</div>
        <p>tex2: {{ NewProps.text2 }}</p>
      </template>

    </Comp>
  </div>
</template>

<script>
import Comp from "./子组件.vue";
export default {
  data() {
    return {};
  },
  components: {
    Comp,
  },
};
</script>

<style lang="less" scoped></style>

                子组件：

<template>
  <div>
    <p>子组件</p>
    <!-- 单向绑定数据传值 -->
    <slot name="top" :text1="1"></slot>
    <slot></slot>
    <slot name="footer" :text2="2"></slot>
  </div>
</template>

<script>
export default {
  data() {
    let arr = 3;
  },
};
</script>

<style lang="less" scoped></style>

注意：

        1. vue3 只能用 v-slot

        2. v-slot 是从 2.6.0+ 开始使用在此之前的格式为：

 <template slot="top" slot-scope="props"> 
        <div>
          <p>具名插槽-top</p>
        </div>
        <!-- 通过自定义变量引出子组件传入数据 -->
        <p>tex1: {{ props.text1 }}</p>  
</template>

---

4. 动态插槽：

        格式： v-slot : [ 变量插槽名 ]

        简写： #[ 变量插槽名 ]

        例：

                父组件：

<template>
  <div>
    <h1>父组件</h1>
    <Comp>
      <p>匿名插槽</p>
        <!-- 动态插槽名 -->
      <template v-slot:[name]="props"> 
        <div>
          <p>具名插槽-top</p>
        </div>
        <!-- 通过自定义变量引出子组件传入数据 -->
        <p>tex1: {{ props.text1 }}</p>  
      </template>

      <template #footer="NewProps">
        <div>具名插槽-footer</div>
        <p>tex2: {{ NewProps.text2 }}</p>
      </template>

    </Comp>
  </div>
</template>

<script>
import Comp from "./子组件.vue";
export default {
  data() {
    return {
       name:"top"   // 定义一个变量
    };
  },
  components: {
    Comp,
  },
};
</script>

<style lang="less" scoped></style>