Vue-插槽

---

插槽是什么

vue中的插槽指的是子组件提供给父组件使用的一个占位符用标签表示，父组件可以在这个占位符中填充任何模板代码比如html、组件等，填充的内容会替换掉子组件的标签（替换占位符）
大致来说插槽的作用是：父组件提供内容，在子组件中展示。也有相反的作用域插槽

有哪些插槽

1.默认插槽

<slot></slot>

2.具名插槽
具名插槽可以在一个组件中出现N次，出现在不同的位置。
再2.6.0使用v-slot:插槽名 语法糖:#插槽名

//子组件中
 <slot name="名称"></slot>
//父组件中
<template v-slot:名称>内容</template>

3.作用域插槽
作用域插槽就是带参数（数据）的插槽，强调的则是数据作用的范围
在子组件的插槽中带入参数（数据）提供给父组件使用，该参数（数据）仅在插槽内有效，父组件可以根据子组件中传过来的插槽参数（数据）对展示内容进行定制

也就是：子组件提供内容（数据），在父组件中展示。

如何使用：

1. 在子组件中设置:slot：自定义name=data中的属性或对象

//默认作用域插槽情况下
<!-- slot标签中属性名跟变量名必须一至 -->
<slot :msg="msg"></slot>  
//具名作用域插槽情况下：绑定个name
<slot :msg="msg" name="s3"></slot>   

在父组件中设置：slot-scope=“自定义命名”

//默认作用域插槽情况下
<box1>
      <template slot-scope="box1scope">
        <h1>{{box1scope.msg.name}}</h1>
      </template>
    </box1>
//具名作用域插槽情况下：绑定个v-slot:名称="作用域名称"
<box1 v-slot:s3="box1scope">
        <h1>{{box1scope.msg.name}}</h1>
</box1>

案例：

//父组件App.vue中
<template>
  <div v-cloak class="App">
    <!-- 默认插槽传值 -->
    <box1>
      <!-- 将box2组件传入到box1默认插槽中 -->
        <box2></box2>
    </box1>
    <!-- 具名插槽传值 -->
    <box1>
    <template v-slot=s2>
      <h2>
        {{msg}}
      </h2>
    </template>
    </box1>
    <!-- 作用域插槽传值 -->
    <box1 v-slot:s3="box1scope">
        <h1>{{box1scope.msg.name}}</h1>
    </box1> 
  </div>
</template>

<script>
import box1 from "@/components/box1.vue"
import box2 from "@/components/box2.vue"
export default {
  data() {
        return {
          msg: "父组件App",
          name:"这是父组件App.vue传的值"
        }
      },
      components:{
         box1,
         box2
      },
      methods: {
         fn(){
          console.log(box.msg.name)
         }
      },
}
</script>

//子组件box1中
<template>
    <div>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="s2"></slot>
    <!-- 作用域插槽 -->
    <!-- slot标签中属性名跟变量名必须一至 -->
     <slot :msg="msg" name="s3"></slot>  
    </div>
</template>
<script>
    export default {
        data() {
            return {
                box1name:"box1插槽中",
                msg: {name:"ljy",age:21}
            }
        },
    }
</script>

//子组件box2中
<template>
<h1>{{msg}}</h1>
</template>
<script>
export default {
    data() {
        return {
            msg:"box2组件"
        }
    },
}
</script>

总结

注意点：

• 没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据
• 插槽名不用使用引号引起来,直接写变量名
• 插入的内容必须是template标签或者组件 不能是原生的元素