Vue基础（slot插槽-内容分发）

最新推荐文章于 2024-01-05 00:13:56 发布
最新推荐文章于 2024-01-05 00:13:56 发布
阅读量149 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45368324/article/details/106451949
版权
本文介绍了Vue中的插槽机制，包括匿名插槽、具名插槽和作用域插槽。匿名插槽是默认的插槽，具名插槽通过name属性实现内容分发。作用域插槽允许父组件访问子组件的数据，通过slot-scope指令实现。文章详细阐述了如何在实际开发中应用这些插槽功能。
摘要由CSDN通过智能技术生成

插槽（slot）

  1. 插槽是什么？
    当引用组件时，我们可以向组件的标签中嵌入内容。这些内容可以嵌入到子组件中，但是需要使用插槽机制即，slot；

  2. 如何使用插槽

  • 首先在创建子组件时需要声明一个 slot 标签占位；
  • 在组件标签中嵌入内容
  1. 具名slot和匿名slot

  • 匿名 slot，在声明 slot 时不写 name 属性，嵌入在组件标签中没有写 slot 属性的标签都会放在匿名 slot 中

  • 具名 slot，在声明 slot 时要写上 name 属性；嵌入在组件标签中的内容需要指定 slot=“slot的名字”

• slot：内置的组件：可以将父组件中的子组件里面的模板数据(标签的内容)进行显示

• 具名插槽
• slot属性值和子组件中slot插槽中的name属性对应
• 子组件的slot组件上的name属性会和父组件中的slot属性进行匹配，并按照子组件的顺序显示对应的模板数据
• 没有name属性的slot会解析默认的标签

• 作用域插槽
• slot-scope:作用域插槽；可以让我们在父组件这个位置取到子组件的数据

• 能够让父组件使用子组件中的组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport
最低0.47元/天 解锁文章
weixin_45368324
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 模版继承复用之slot内容分发
leg的博客
02-01 7532
思考 前段时间学习django，发现django的模版继承挺好用，然后想着怎么能实现类似与django这种效果。怎么把所有页面中相同的元素做一次封装，然后减少重复代码的书写？怎样才能实现一个可继承，抽象的组件方式。查看了官方api之后发现了有个slot内容分发，然后想着能不能使用这种方式做封装。 行动 知识储备Vue API slot 内容分发 props 父子组件间传值 vm.$e
Vue进阶（三）插槽slot，并使用slot开发高级分页组件
m0_67391907的博客
03-16 957
如果对组件不太了解，可以先阅读笔者的这两篇文章，在对组件有了一定的了解之后，在查看本篇文章： vue进阶（一），深入了解组件，自定义组件 Vue进阶（二）设计高级组件——自定义通知 注意：本篇文章的重点是使用slot开发一个分页组件，如果希望详细了解Vue中slot的用法，可以查看官网文档，同时，如果您在阅读本文中发现错误或者使用不当的地方，还请您指出修正！ 1. 什么是插槽 Vue实现了一套内容分发的API，而<slot>元素就是承载分发内容的出口。 使用<slot>，我们可以这样
Vue核心技术-21,slot插槽-内容分发
BraveWangDev
08-21 585
一,前言 Vue组件的三个API来源:props传递参数,events触发事件,slot内容分发 前两个来源已经介绍过了,这一篇就来介绍slot内容分发 二,什么是slot 实际开发中,一些复杂的布局需要多个组件组合来实现 混合父组件的内容与子组件的模板时,需要用到slot进行内容分发, slot也被称作插槽 三,slot的编译作用域 以下这段代码就包含一个插槽: ...
Vue插槽详解-使用slot分发内容
最新发布
baidu_33164415的博客
01-05 816
Vue插槽详解-使用slot分发内容
Vue-slot插槽（内容分发）
MW
03-13 101
slot插槽（内容分发） 单个slotb 具名slot *混合父组件的内容与子组件自己的模板–>内容分发 *父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。 ...
Vue组件之--slot内容分发
codesWay的博客
03-20 838
以前，Vue组件总是一个个的空标签的形式出现的，那么如果说组件标签里面有内容，那么要获取这些内容要怎么办呢？Vue提供了一个解决方案：slot内容分发，其作用就是用来获取组件中的原内容（就是组件标签内部的内容）。用法分为两种情况:当组件内的原内容结构比较简单的时候可以使用单一slot，当原内容结构比较复杂的时候使用具名slot；单一slot：在组件模板合适的位置插入slot组件即可； &lt;di...
vue插槽slot-内容过滤
Stavin Li的博客
05-07 508
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
vue2 插槽：slot，slot-scoped，v-slot
letianxf的博客
12-23 3010
vue2 插槽：slot，slot-scoped，v-slot。匿名插槽，具名插槽，作用域插槽
vue插槽slot-传值
Stavin Li的博客
01-30 862
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
Vue中的slot使用插槽分发内容的方法
08-27
Vue中的slot使用插槽分发内容的方法 在 Vue 中，slot 是一个非常重要的概念，它允许我们在组件中插入动态内容，从而使得我们的组件更加灵活和可重用。今天，我们将深入探讨 Vue 中的 slot 使用插槽分发内容的方法。...
详解vue使用插槽分发内容slot的用法
10-17
以下是Vue使用插槽分发内容的方法的详细说明。 首先，简单介绍单个插槽的使用。在子组件中，我们可以通过<slot>标签来定义插槽。当父组件使用这个子组件时，可以插入任何想要的内容。如果没有在父组件中提供内容，...
vue基础知识--axios合并请求和slot
10-15
标题“vue基础知识--axios合并请求和slot”所涉及的知识点非常丰富，主要包括了Vue.js框架中关于axios的使用方法以及slot插槽的用法。接下来我将分别详细讲解这两个知识点。 **一、axios合并请求** 在Vue中，axios...
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
08-27
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件 在Vue中，slot是组件中的一种重要机制，它允许父组件将内容分发到子组件中，从而实现高度复用和灵活的组件开发。通过使用slot，开发者可以轻松地编写...
Vue脚手架小练习（购物车）
weixin_45368324的博客
06-05 1470
简单小案例 效果图 实现 App.vue <template> <div> <p> <input type="text" v-model="text" /> <button @click="addGood">加购物车</button> </p> <ul> <li v-for="(good, index) in goods" :key="goo
Vue基础（父子组件数据同步）
weixin_45368324的博客
05-27 1018
父子组件数据同步 组件双绑的实现 案例0-1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=
Vue基础（Vue实例）
weixin_45368324的博客
04-15 818
组件 vue 的核心功能之一就是组件 组件基本分类 根组件 可复用的功能组件 根组件的创建 通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象 let app = new Vue(创建组件所需要的一些配置选项); 组件配置选项： https://cn.vuejs.org/v2/api/ 组件内容渲染 渲染一个组件的内容可以通过两种方式来进行 template 选项 ren...
Vue基础（filters 过滤器属性）
weixin_45368324的博客
05-01 700
过滤器 过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数 假设有一个用于把内容转为大写的过滤器函数 toUpperCase {{content|toUpperCase}} | : 管道符，表示数据从左至右通过管道符进行传递 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果 注册过滤器 全局过滤器 Vue.filter('过滤器...
Vue基础（computed 计算属性）
weixin_45368324的博客
05-01 615
computed 在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况， vue 定义了一个专门用来处理这种派生数据的选项：computed 1.计算属性类似 getter 和 setter ，当访问某个计算属性的时候，就会调用 computed 中同名的函数，函数的返回值将作为该计算属性的值 2.计算属性的值依赖计算函数中依赖的其它响应...
vue slot插槽
07-28
Vue中的插槽（Slots）是一种在父组件中将子组件的内容进行分发的机制。通过插槽，我们可以在父组件中定义一些占位符，然后在子组件中填充具体的内容。 在Vue中，插槽有两种类型：具名插槽和默认插槽。 具名插槽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值