vue2 —— 插槽及与vue3插槽区别

记忆深处里的海

已于 2024-08-26 02:45:36 修改

阅读量377

点赞数 15

文章标签： vue.js 前端 javascript

于 2024-08-26 01:39:32 首次发布

本文链接：https://blog.csdn.net/m0_49008668/article/details/141536761

版权

文章目录

什么是插槽？

插槽就像放在组件中的占位标签，使用组件时我们将要放到占位标签处的DOM结构写入组件标签体中即可。
通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，可以通过属性等数据实现动态的内容展示及交互，具有高度的灵活性。

一：匿名/默认插槽

标签：<slot></slot>

使用方法：

插槽一般定义在子组件中，相当于一个占位。<slot></slot>
父组件模板中的子组件标签要写成一对的样式，即：<Category></Category>
这样<Category></Category>中的内容就会显示在子组件<slot></slot>标签的位置。
如果<Category></Category>中没有内容，<slot></slot>标签中的内容就会显示在页面

示例代码：

在父级模板中使用该组件时，对应位置的内容会被插入到默认插槽处：

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <template>
       <p>这是插入到子组件中的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>



<!-- 子组件 -->
<template>
  <div>
    <h2>子组件</h2>
    <!-- 这里是插槽 -->
    <slot></slot>
  </div>
</template>

二：后备内容

此处所说的后备内容是官方文档里面的叫法，实际上就是指插槽的默认值。在定义组件时，可以在<slot><slot>之间给出插槽的默认内容，也就是说当使用插槽时如果没有在组件标签内定义插槽的内容，则默认内容生效，否则默认内容不生效。

例如：定义组件插槽设置默认内容

//定义一个组件Box
<template>
    <div>
        <div>这是一个定义了插槽的组件</div>
        <!-- 通过slot定义了一个插槽,并在插槽中给出了默认值 -->
        <slot>
            <div>这是插槽的默认内容</div>
        </slot> 
        <div>组件其它内容</div>
    </div>
</template>

不使用默认值，覆盖

<Box>
    <template>
        <div>插槽中展示的内容</div>
    </template>
</Box>

页面展示内容为：

三：具名插槽

一个子组件可能有多个插槽，不同的插槽放置不同的内容，为了区分不同的插槽，每个插槽应该有自己的名字，这就是具名插槽。

可以通过给 <slot> 元素添加 name 属性来创建具名插槽，然后在父组件中使用

<v-slot ：name ="{slotName}"> 来引用具名插槽。

示例代码：
在父级模板中，使用v-slot指令（或简写为#）指定插槽名，将内容分配到相应的具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>



子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

四: 动态插槽

动态指令参数在 v-slot 上也是有效的，即可以定义下面这样的动态插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

五：（1）作用域插槽

作用域插槽的应用场景：
数据在子组件中，而根据数据生成的结构在插槽的使用者上。（插槽的使用者即使用子组件的父组件).

传递数据

因为插槽的使用者（父组件）需要使用子组件的数据，所以需要将数据从子组件传递到插槽的使用者中。

子组件的传递方法：利用插槽标签<slot></slot>结合v-bind指令进行传递：
<slot :定义属性名="传递的data数据"></slot>
可以传递多个数据
父组件接收数据的方法有两种：默认作用域

默认作用域插槽接受方法

插槽的使用者接收的方法：通过子组件标签上的v-slot指令直接接受一个插槽的props对象。
子组件传入插槽的props作为v-slot指令的值可以在插槽内的表达式中访问。

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

具名作用域插槽接受方法

具名作用域插槽的工作方式和普通作用域插槽的工作方式类似，插槽的props可以作为v-slot指令的值v-slot:name="slotProps"被访问到，也可以使用简写#name="slotProps"访问。

解构：v-slot:name="{slotProps}" 或 #name="{slotProps}"

子组件传递props属性：

<slot name="header" message="hello"></slot>

父组件接受props属性：

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>

父组件headerProps接受到的数据是 { message: 'hello' }子组件slot标签的name属性是不会传递给插槽的。

默认作用域插槽和具名作用域插槽一起使用：

当一起使用的时候相当于为默认插槽设置了一个default的名字，使用<template>标签和v-slot:default接受默认作用域插槽的属性值。具名作用域插槽正常使用即可。

<template>
  <MyComponent>
    <!-- 使用显式的默认插槽 -->
    <template #default="{ message }">
      <p>{{ message }}</p>
    </template>

    <template #footer>
      <p>Here's some contact info</p>
    </template>
  </MyComponent>
</template>

（2）作用域插槽动态绑定接受方法

插槽的使用者接收的方法：使用<template></template>标签的scope属性接收从子组件通过<slot>标签传递过来的所有数据，接收到的数据是一个对象。
也可以使用<template></template>标签的slot-scope属性接收数据。
scope和slot-scope接收数据支持解构赋值

注意：不需要name

<template scope="自己起的变量名">
</template>

使用：

子组件category.vue —— 数据在子组件中

<template>
    <div class="category">
        <h3>{{title}}</h3>
        <!-- 插槽就相当于定义一个坑，等组件来填充 -->
        <!--slot将games传递给插槽的使用者  -->
        <slot :games="games">我是一个插槽</slot>
    </div>
</template>

<script>
export default {
    name: 'CategoryVue',
    props: ['title'],
    data() {
        return{
            games: ['王者荣耀', '我的世界', '和平精英', '穿越火线']
        }
    }
}
</script>

父组件App.vue(插槽的使用者) —— 结构在父组件中

   <Category title="游戏">
      <!-- 支持解构赋值 -->
      <template slot-scope="{games}">
        <ol>
          <li v-for="(game,index) in games" :key="index">{{game}}</li>
        </ol>
      </template>
    </Category>

无渲染组件

简单来说就是：只有逻辑内容没有渲染内容的子组件叫做无渲染组件，子组件的渲染通过具名插槽全权交给父组件渲染。

如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。我们将这种类型的组件称为无渲染组件。

插槽总结

插槽的作用：
让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。
使用插槽的时候父组件向子组件传递的html内容，在组件实例对象的$slots属性上存储着父组件向子组件传递的html内容

六：vue2和vue3插槽的区别和使用

Vue2和Vue3的插槽系统有一些差异，但基本概念相同。

默认插槽：

在Vue2中，可以使用<slot></slot>来定义默认插槽。在Vue3中，默认插槽不需要特殊标记，可以直接通过模板使用<slot></slot>。
具名插槽：

在Vue2中，可以通过<slot name="slotName"></slot>来定义具名插槽，然后在父组件中使用<template v-slot:slotName>来填充。在Vue3中，插槽的定义和使用方法保持一致，只是指令形式有所变化，使用#slotName代替v-slot:slotName。
作用域插槽：

在Vue2中，可以通过<slot name="slotName" :text="someText"></slot>传递数据到具名插槽，子组件通过this.$slots.slotName来接收插槽。在Vue3中，使用v-slot:slotName="slotProps"来接收作用域插槽的数据，其中slotProps是一个包含传递数据的对象。

记忆深处里的海

关注

15
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
vue2 —— 插槽及与vue3插槽区别

之间给出插槽的默认内容，也就是说当使用插槽时如果没有在组件标签内定义插槽的内容，则默认内容生效，否则默认内容不生效。简单来说就是：只有逻辑内容没有渲染内容的子组件叫做无渲染组件，子组件的渲染通过具名插槽全权交给父组件渲染。此处所说的后备内容是官方文档里面的叫法，实际上就是指插槽的默认值。一个子组件可能有多个插槽，不同的插槽放置不同的内容，为了区分不同的插槽，每个插槽应该。具名作用域插槽的工作方式和普通作用域插槽的工作方式类似，插槽的。接受默认作用域插槽的属性值。（插槽的使用者即使用子组件的父组件).
复制链接

扫一扫