Vue深入理解插槽slot的使用

目录
  • 一、插槽(slot)是什么
  • 二、使用场景
  • 三、slot的分类
    • 默认插槽
    • 具名插槽
    • 作用域插槽
  • 四、介绍对slot的理解

一、插槽(slot)是什么

slot是组件内的一个占位符，该占位符可以在后期使用自己的标记语言填充。

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式，适用于父组件===>子组件

例子：

//父组件中
<Category>
	<div>html结构</div>
</Category>
//子组件中：
<template>
	<div>
		<slot>插槽的默认内容</slot>
	</div>
</template>

二、使用场景

  • 通过插槽可以让用户拓展组件，去更好地复用组件和对其做定制化处理；
  • 如果父组件在使用到一个复用组件的时候，这个组件在不同的地方有少量的更改，如果去重写组件是很浪费，这时，通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用。
  • 比如：布局组件、表格列、下拉选项、弹框显示内容等。

三、slot的分类

默认插槽

子组件用<slot>来标记渲染的位置，在父组件的自定义标签中写slot中的结构。如果在子组件的<slot>中写了结构，那么会作为默认显示的内容。

//父组件（数据在父组件中）
<template>
  <div id="app">
    <Category title="美食">
      <ul>
        <li v-for="(item,key) in foods" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="游戏">
     <ul>
        <li v-for="(item,key) in games" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="电影"></Category>
  </div>
</template>
//子组件
<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot>默认显示内容</slot>
  </div>
</template>

效果：

具名插槽

为每个slot标记名字，也是处理具有多个插槽时的对应关系，标记名字的方法有两个：

方法1：

//父组件
<Category title="美食">
<ul slot="foods">
   <li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
//子组件
<h3>{{title}}分类</h3>
<slot name="foods">默认显示内容</slot>     /*给插槽取名*/

方法2：此时必须标记在template标签上

<template v-slot:foods>
    <ul>
      <li v-for="(item,key) in foods" :key="key">{{item}}</li>
  </ul>
</template>

作用域插槽

当元素在子组件中时，想实现上述操作，就会造成数据获取不到的问题，这时就可以使用作用域插槽，作用域这三个字就体现在数据的作用域上。

//父组件
<template>
  <div id="app">
    <Category title="美食">
      <template scope="foods">
        <ul>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ul>
      </template>
    </Category>
    <Category title="美食">
      <template scope="foods">
      <!-- <template slot-scope="foods"> -->
        <ol>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ol>
      </template>
    </Category>
  </div>
</template>
//子组件：数据在子组件中
<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :foods="foods">默认显示内容</slot>
  </div>
</template>

可以通过解构获得slot-scope={foods}，还可以重命名slot-scope={new:foods}

四、介绍对slot的理解

回答：slot就是插槽，主要的作用就是拓展组件，在重复使用一个组件的时候可以通过少量的修改就达到复用的效果。分成默认插槽、具名插槽和作用域插槽。其中前两个都是元素在父组件中，拓展的结构也在父组件中，直接在子组件中占位，在父组件中添加结构即可，区别就是具名插槽给插槽取了名字，多个插槽存在时可以一一对应。而作用域插槽的数据在子组件中，扩展的结构要在父组件中，这是就要利用slot进行子===>父的通信，给数据一个新的作用域，因此叫做作用域插槽。

到此这篇关于Vue深入理解插槽slot的使用的文章就介绍到这了,更多相关Vue slot内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    Vue插槽slot详细介绍(对比版本变化,避免踩坑)

    目录 插槽是什么? 怎么使用插槽? 基本用法 后备(默认)内容 具名插槽 作用域插槽 插槽版本变化 总结 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化. 插槽是什么? 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容会替换子组件的<slot></slot>标签.简单理解就是子组

  • vue作用域插槽详解、slot、v-slot、slot-scope

    vue作用域插槽详解、slot、v-slot、slot-scope

    目录 vue 插槽slot和具名插槽 作用域插槽的核心作用是 实例说明 子组件 父组件 效果图 vue 插槽slot和具名插槽 作用都是在调用组件的时候传递一些DOM结构进去, 不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name 他们用法简单不在赘述. 重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot 作用域插槽的核心作用是 子组件给父组件传递数据,当然也包含上述插槽的能力 老版作用域插槽, slot="test"

  • vue如何使用vue slot封装公共组件

    目录 使用vue slot封装公共组件 使用slot插槽封装 使用vue slot封装公共组件 公用子组件:publicSlot       <div>         <div class="top">         <h1 class="title">{{title}}</h1>             <slot name="headerRight"> 可以根据你slot nam

  • Vue中slot的使用详解

    Vue中slot的使用详解

    目录 使用 slot 基础用法 具名插槽 作用域插槽 slot 实现 总结 在Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我们想要的页面. slot(插槽)是组件功能的重要组成部分,插槽必须用于组件才有意义. 它为组件提供了对外的接口,允许从组件外部传递内容,并将这部分内容放置到指定的位置. 使用 slot 当一个组件可能被使用至少两次并且两次使用内容(这里指组件视图的组成)不同时,插槽才有存在的必要.注意: 本文的代码都是

  • Vue3插槽Slot实现原理详解

    Vue3插槽Slot实现原理详解

    目录 Vue官方对插槽的定义 Slot到底是什么 如何使用插槽 回顾组件渲染的原理 插槽的初始化原理 解析插槽中的内容 作用域插槽原理 具名插槽原理 默认内容插槽的原理 Vue官方对插槽的定义 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. Slot到底是什么 那么Slot到底是什么呢?Slot其实是一个接受父组件传过来的插槽内容,然后生成VNode并返回的函数. 我们一般是使用 <

  • vue中的slot封装组件弹窗

    vue中的slot封装组件弹窗

    目录 slot封装组件弹窗 vue组件slot入门---弹窗组件 插槽的基础使用 弹窗组件 slot封装组件弹窗 <template>   <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" center>     <slot name="content"></slot>   </el

  • 关于vue 的slot分发内容 (多个分发)

    关于vue 的slot分发内容 (多个分发)

    目录 slot分发内容 (多个分发) slot的多种用法 基本用法 插槽中使用data 动态插槽 slot分发内容 (多个分发) 组件模板-元素可以用一个特殊的属性 name 来配置如何分发内容.多个 slot 可以有不同的名字.具名 slot 将匹配内容片段中有对应 slot 特性的元素 <style media="screen">     .panel{       margin:10px;width:150px;       border:1px solid #ccc

  • vue中的slot-scope及scope.row用法

    vue中的slot-scope及scope.row用法

    目录 slot-scope及scope.row的用法 vue项目中slot-scope="scope"报错scope is defined but never used 解决方法 slot-scope及scope.row的用法 最近在写后台管理系统 在写到修改的地方时 之前的思路是直接把当前对象传过去 然后在进行修改 现在vue提供了scope 以及 scope.row 可以让我们更方便的操作数据 slot-scope='scope' 作用域插槽中定义一个对象(这里对象被定义为scop

  • Vue深入理解插槽slot的使用

    Vue深入理解插槽slot的使用

    目录 一.插槽(slot)是什么 二.使用场景 三.slot的分类 默认插槽 具名插槽 作用域插槽 四.介绍对slot的理解 一.插槽(slot)是什么 slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件 例子: //父组件中 <Category> <div>html结构</div> </Category> //子组件中: &l

  • vue插槽slot的理解和使用方法

    前言 Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替.根据slot的应用场景可以分为匿名slot和具名slot. 一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是"父组件向子组件传递dom时会用到插槽",这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去

  • vue插槽slot的简单理解与用法实例分析

    本文实例讲述了vue插槽slot的简单理解与用法.分享给大家供大家参考,具体如下: vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结. 从字面理解插槽是预先插入一个代码空间,用于后期塞入数据. 插槽分类 匿名插槽     ------------------   匿名的代码空间 具名插槽     ------------------   带有命名的代码空间 作用域插槽 -------------------   带有数据的代码空间 插槽使用示例 匿名插槽 说明在组件中先定义预留的代码空

  • 如何理解Vue的作用域插槽的实现原理

    如何理解Vue的作用域插槽的实现原理

    本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记 举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作).而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • 详解Vue中使用插槽（slot）、聚类插槽

    一.基本的插槽 这里总结两点 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示 (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往子组件中 插入的标签 这里就代表组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> 这里如果是这样的 <child> </child> 就会显示 <sl

  • Vue插槽slot全部使用方法示例解析

    目录 何为插槽 示例解析 插槽的基本使用 具名插槽 作用域插槽 总结 何为插槽 我们都知道在父子组件间可以通过v-bind,v-model搭配props 的方式传递值,但是我们传递的值都是以一些数字,字符串为主,但是假如我们要传递一个div或者其他的dom元素甚至是组件,那v-bind和v-model搭配props的方式就行不通了,但是插槽(slot)可以,插槽可以传递dom元素,在子组件中通过接收使用父组件传递过来的dom元素,我的理解就是在定义一个组件时,有些dom是动态显示的,即子组件现在

  • 使用react context 实现vue插槽slot功能

    使用react context 实现vue插槽slot功能

    首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n

  • vue学习笔记之slot插槽基本用法实例分析

    本文实例讲述了vue学习笔记之slot插槽基本用法.分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu

  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    什么是插槽? 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为 匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc

随机推荐