vue学习笔记26-插槽Slots

插槽Slots

组件接收模板内容（html结构），在某些场景中我们想要为子组件传递一些模板片段。让子组件在它们的组件中渲染这些片段

将子组件在父组件引用后，比以往更改一下,将<子组件名/>➡️<子组件名></子组件名>,如下

javascript 复制代码

<template>
  <SlotsBase>
    <div>
      <h3>插槽标题</h3>
      <p>插槽内容</p>
    </div>
  </SlotsBase>
</template>

<script>
import SlotsBase from './components/SlotsBase.vue';
export default {
  components:{
    SlotsBase
  }
}
</script>

<style>
</style>

而子组件如下，目的将父组件div内容放在slot位置进行显示

🆗内容显示，咱们可以根据<slot>的位置拜访内容的位置

由官网描述

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

？为什么不直接写在子组件，那样不是更容易维护吗

➡️因为要插进去的HTML是由父页动态生成的不固定的，子页的位置还不知道放什么，得由父业决定（b站上某师傅答）

渲染作用域

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

如果<h3>标签内内容不是定死的，而是一个动态的，动态内容要写在父级中定义，由上可得

javascript 复制代码

<template>
  <SlotsTwo>
    <h3>{{message}}</h3>
  </SlotsTwo>
</template>

<script>
import SlotsTwo from './components/SlotsTwo.vue';
export default {
  data(){
    return{
      message:"插槽内容续集"
    }
  },
  components:{
    SlotsTwo
  }
}
</script>

<style>
</style>

默认内容

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

子件

未传递数据

传递数据

具名插槽

通过名字进行渲染。即多个插槽之间我们可以通过名字去描述它摆放的位置

父组件

javascript 复制代码

<template>
  <SlotsTwo>
    <template v-slot:header>
      <h3>{{message}}</h3>
    </template>
    <template v-slot:main>
      <p>内容</p>
    </template>
  </SlotsTwo>
</template>

子组件

javascript 复制代码

<template>
    <h3>Slots续集</h3>
    <slot name="header">插槽默认值</slot>
   
    <a href="#">中间插入内容</a>
    <slot name="main">插槽默认值</slot>
    
</template>

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

插槽中的数据传递

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

🤔➡️为达到上述目的，我们可以像对组件传递props那样，向一个插槽的出口上传递attribute

今天发现了一个奇怪的事，我只是将这两行注释，结果没注释的那行也在页面中不再显示奇怪，顺序换了也没用

父组件<template>中

子组件代码

javascript 复制代码

<template>
    <h3>Slots插槽</h3>
    <slot :msg="  childMessage"></slot>
</template>

<script>
export default {
    data(){
        return{
            childMessage:"子组件数据"
        }
    }
}
</script>

显示效果

具名插槽中数据传递

#代表v-slot,header➡️名字