【vue3入门】-【22】 插槽

插槽-基本使用方式

我们已经了解了组件能够接收任意类型的JavaScript值作为props，但是组件要如何接收模版内容呢？在某些场景中，我们可能想要为子组件传递一些模版片段，让子组件在他们的组件中渲染这些片段。

最基本的使用方式

app.vue

<template>
 
 <!--单标签就是仅应用当前组件-->
 <!-- <SlotsComponent /> -->
 <!-- 双标签代表在引用组件的同时需要向子组件传递html结构 -->
 <SlotsComponent>
    <h3>父组件插槽的标题</h3>
    <p>父组件插槽的内容</p>
 </SlotsComponent>
</template>

<script>
import SlotsComponent from "./components/slotsBase.vue"

export default{
  components:{
    SlotsComponent
  }
}
</script>
<style>
</style>

slotBase.vue

<template>
    <h3>最基础的插槽使用方式</h3>
    <!--用于接收父组件的插槽内容-->
    <slot></slot>
</template>
<script>
</script>

<slot>元素是一个插槽出口（slot outlet）标示了父元素提供的插槽内容（slot content）将在哪里被渲染

插槽（作用域、默认内容、具名插槽）

• 渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模版中定义的

• 默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认的内容

• 具名插槽

在父级组件中使用v-slot可以为插槽命名，在子组件中使用时，接收插槽定义name=”父组件中定义的插槽名称“，则可以实现父组件中插槽的拆分传递

app.vue -- 父级

<template>
 <!--单标签就是仅应用当前组件-->
 <!-- <SlotsComponent /> -->

  <!--非具名插槽-->
 <!-- 双标签代表在引用组件的同时需要向子组件传递html结构 -->
 <!-- <SlotsComponent>
    <h3>父组件插槽的标题</h3>
    <p>父组件插槽的内容</p>
 </SlotsComponent> -->

<!-- <SlotsTow> -->
  <!-- <h3>插槽内容</h3> -->
  <!--通过参数方式可以使用父组件的参数内容-->
  <!-- <h3>{{ message }}</h3> -->
<!-- </SlotsTow> -->

<!--具名插槽-->
<SlotsTow>
  <template v-slot:header>
    <h3>父级具名插槽的头信息</h3>
  </template>
  <!-- <template v-slot:main>
    <p>父级具名插槽的内容</p>
  </template> -->
  <!--v-slot可以简写为#-->
  <template #main>
    <p>父级具名插槽的内容</p>
  </template>
</SlotsTow>
</template>

<script>
import SlotsTow from "./components/slotsTow.vue"

export default{
  components:{
    SlotsTow
  },
  data(){
    return{
      message:"父组件使用参数方式传递的插槽内容"
    }
  }
}
  
</script>

slotsTwo.vue -- 子级

<template>
    <h3>Slots续集</h3>
    
    <!--父组件插槽没有传递插槽内容时，则展示默认内容，否则展示插槽内容-->
    <!--不带指向性的插槽，父组件传递什么内容就就收什么内容-->
    <!-- <slot>子组件接收插槽默认值信息</slot> -->

    <!--接收父级具名插槽，name则是父级v-slot的属性值-->
    <slot name="header">插槽默认值</slot>
    <hr>
    <slot name="main">插槽默认值</slot>
</template>

v-slot有对应的简写“#”，因此<template v-slot:header>也可以简写为<template #header>，意思就是将这部分模版片段传入子组件的header插槽中。

插槽-实现父组件使用子组件参数

• 非具名插槽传递

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要一种方法来让子组件在渲染时，将一部分数据提供给插槽

我们确实也有办法可以这么实现，可以项对组件传递props那样，像一个插槽的出口上传递attribute

slotsAttr.vue -- 子组件

<template>
    <h3>插槽再续集内容</h3>

    <!--子组件先向父组件传递childMessage参数,然后再有父组件渲染该插槽参数-->
    <slot :msg="childMessage"></slot>
</template>
<script>
export default {
    data() {
        return {
            childMessage: "子组件数据"
        }
    }
}
</script>

app.vue -- 父组件

<template>
 <!--组件中添加v-slot属性，用于接收子组件传递过来的参数-->
<slotsAttrVue v-slot="childParams">
  <!--通过使用childParams.msg的方式来展示子组件的数据-->
  <h3>{{ currentTest }} -{{ childParams.msg }}</h3>
</slotsAttrVue>
</template>

<script>
import slotsAttrVue from './components/slotsAttr.vue'
export default{
  components:{
    slotsAttrVue
  },
  data(){
    return{
      message:"父组件使用参数方式传递的插槽内容",
      currentTest:"测试内容"
    }
  }
}
  
</script>

• 具名插槽传递

slotsAttr.vue -- 子组件

<template>
    <h3>插槽再续集内容</h3>

    <!--子组件先向父组件传递childMessage参数-->
    <slot name="header" :msg="childMessage"></slot>
    <hr>
    <slot name="main" :job="jobMessage"></slot>
</template>
<script>
export default {
    data() {
        return {
            childMessage: "子组件要传递给父组件的数据",
            jobMessage:"子组件要传递给父组件的工作"
        }
    }
}
</script>

app.vue -- 父组件

<template>
<!--组件中添加v-slot属性，用于接收子组件传递过来的参数-->
<!--具名方式实现: 取消在组件标签中添加v-slot，在具名template中添加插槽属性，接收子组件的参数-->
<slotsAttrVue>
  <template #header="childParams">
      <!--通过使用childParams.msg的方式来展示子组件的数据-->
  <h3>{{ currentTest }} -{{ childParams.msg }}</h3>
  </template>
  <template #main="childParams">
  <p>{{ childParams.job }}</p>
  </template>
</slotsAttrVue>
</template>

<script>
import slotsAttrVue from './components/slotsAttr.vue'
// import SlotsTow from "./components/slotsTow.vue"

export default{
  components:{
    slotsAttrVue
  },
  data(){
    return{
      message:"父组件使用参数方式传递的插槽内容",
      currentTest:"测试内容"
    }
  }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9