vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力。我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条、显卡、声卡等设备。基于同样的思想,Vue在封装组件时,也可以预留插槽,在组件被使用的时候,我们就可以往组件插槽中插上其他内容。
Vue中的插槽用 slot 标签进行占位。这一块我们会讲两部分内容:插槽和作用域插槽。
插槽可理解为,父模板中向子组件内部传递内容。作用域插槽则是,父模板中获取子组件中的数据,组装好内容之后再传递给子组件。下面我们分别详细介绍。
一、插槽
前面说了,插槽是使用 slot 标签在组件中放置占位符。我们定义一个带插槽的组件。
Vue.component('alert-box', { template: `
Error!
`})
组件模板 template 中的 就是我们为 alert-box 组件预留的插槽。alert-box 组件在使用的时候,我们就能往插槽中传递内容。
比如我们传递一段文本
Something bad happened.
就会被渲染如下
如果我们传递一个按钮
紧急事件
按钮就会被渲染出来
我们也可以传入一堆HTML内容,这些HTML内容都会渲染到 slot 所在的位置。
紧急通知
请同学们赶紧撤离
校长办公室
渲染如下
通过上面这个例子,应该大致明白了插槽的作用。
为了方便使用,Vue提供了给插槽设置默认内容的功能。如果外部不传入内容,则展示默认内容。如果外部传入内容,则展示传入的内容。
Vue.component('alert-box', { template: `
Error!
Something bad happened.
`})
默认内容是放在 中间,上面我们就是在 中间放置了一段文本 Something bad happened. 。在使用的时候,如果不传入内容,默认就显示这段文本。
紧急撤离
就会被渲染成
上面我们没有给插槽指定名字,实际上Vue会给没有起名字的插槽自动加上一个 default 的名字,等同于
我们也可以为插槽指定其它名字,以方便外部在传入内容的时候,可以指定将内容传递给哪个插槽。这样就更接近电脑主板的思想了,主板上的插槽是分内存条插槽、显卡插槽、声卡插槽 等等,每一个插槽都是有名字的。
我们的组件插槽也可以这样,比如下面代码中我们就指定了头部插槽、尾部插槽。
Vue.component('base-layout', { template: ` `})
这时候在使用的时候,就需要指定内容究竟是传递给哪个插槽,未指定的都会传递给匿名插槽,也就是 default 插槽。
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
如果组件内有多个匿名插槽,那就会传递多份。如果组件内没有匿名插槽,未指定插槽名的内容就会被丢弃。
不过,slot 属性在Vue 2.6.0版本中已经不推荐使用,官方推荐用 v-slot 指令来替代 slot 。v-slot 指令更强大,它不仅可以在这里替代 slot ,还可以替代作用域插槽中的 slot-scope。
我们使用 v-slot 指令改造一下上面的用法。我们通过在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称,来向具名插槽传递内容。
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
这两种使用的效果是一样的。不过我们推荐使用新语法 v-slot 指令。
二、作用域插槽
在学习作用域插槽之前,我们先要明白作用域插槽到底解决了什么问题。
很多时候我们会有这样的需求,需要把子组件中的数据通过父级模板的控制,从而在子组件中渲染出不同的样子。这句话不太好理解,举个具体的例子。
子组件的数据中有一数组
letters = ['A', 'B', 'C', 'D', 'E']
我们在某处需要把这个数组渲染成:A - B - C - D - E,而在另一处又需要渲染成列表:
A
B
C
D
E
这时候就可以通过作用域插槽来实现。作用域插槽就是数据由子组件提供,排版由父组件控制。
在介绍作用域插槽之前,先要介绍一下编译作用域。因为正是编译作用域的存在,才使得作用域插槽有存在的必要。
2.1 编译作用域
编译作用域,简单的说就是父子组件都只能取到自己实例中的数据。官方也给出了描述:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
我们通过一个具体的例子来说明其含义
{{msg}} let vm = new Vue({ el: '#app', components: { com: { template: ` data() { return { msg: '子组件' } } } }, data: { msg: '父组件' } })
父子组件中在各自的 data 中都定义了msg,并且他们值不一样。那子组件在使用的时候
{{msg}}
插值表达式 {{msg}} 到底取到的是谁的数据?很方便可以验证出 {{msg}} 取到的是父组件的数据。其实在父级模板中是无法直接取到子组件中的数据。这正是因为有编译作用域的存在。同理,在子组件中,也不能直接使用父组件中的数据。当然父子组件中的数据并不是绝对隔离,我们可以通过传值的方式,让他们数据进行交互。
作用域插槽就是要解决在父级模板中取到子组件中数据的问题。
2.2 作用域插槽
现在目标已经明确,我们就是要在父级模板中取到子组件中的数据,所以这里势必要进行数据传递。
先考虑子组件的数据传出,我们可以给 slot 标签设置一个自定义属性 data,然后将数据绑定到自定义属性 data 上,即可将数据传出。
然后在父级模板中接收数据。Vue是通过在 上使用特殊的 slot-scope属性,接收子组件设置在插槽 slot 上的全部自定义属性。
scope 变量就会接收到设置在 slot 上的全部自定义属性,然后我们通过点属性名的方式,就可以取到绑定在属性上面的值。
{{scope.data}}
现在我们来实现前面说的字符数组的渲染。在Vue实例中创建子组件com如下
let vm = new Vue({ el: '#app', components: { com: { template: ` `, data() { return { letters: ['A', 'B', 'C', 'D', 'E'] } } } }, })
可以把它渲染成列表
{{item}}
也可以渲染成短横线连接的形式
{{scope.data.join(' - ')}}
我们就可以看到相同的数据展示成不同的形式。
现在我们再完善一下作用域插槽的定义:子组件向父组件传递数据,但父组件通过传递插槽内容来控制数据在子组件中展现方式。
前面说了,slot-scope在 Vue 2.6.0中不再推荐使用,应该使用 v-slot 指令来替代,上面渲染的代码就可以改造如下
{{item}} {{scope.data.join(' - ')}}
总结
本章我们主要介绍了插槽和作用域插槽。插槽部分讲了插槽的使用、插槽默认值、具名插槽。作用域插槽部分主要讲了编译作用域和作用域插槽的使用。
这一块内容是Vue中的高级部分,运用恰当,威力极大。
vue设置标签自定义属性_Vue组件化开发之插槽相关推荐
- 【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发 组件化 认识组件化 注册组件 全局组件和局部组件 父子组件 组件数据 父子组件的通信 父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
- python组件化软件策划_Vue组件化开发
一. 通过axios实现数据请求 1. json简介 json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是 ...
- VUE 前端中如何进行组件化开发?
1.前端里面常说的视图层是什么? 我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层. Vue 的核心库只关注视图层 图1: dom对象树结构 图2:DOM和CSS ...
- 【Vue】Vite 组件化开发
文章目录 组件化开发 一.组件化开发思想 二.Vue 组件的构成 2.1 组件组成结构 2.2 组件 template 节点 2.2.1 在 template 中使用指令 2.2.2 在 templa ...
- 前端笔记:使用Web Components进行原生组件化开发
文章目录 目的 基础说明 技术点介绍 Custom elements Shadow DOM HTML templates 整合成独立组件文件 示例演示与说明 示例一 示例二 es6-string-ht ...
- Thymeleaf + Vue组件化开发
Thymeleaf 搭配 Vue 完成组件化开发 前言 一.vue2 1.引入静态文件 2.声明组件 二.语法搭配 使用vue方法调用th数据 前言 提示:thymeleaf 固然好,但是 vue 也 ...
- Vue组件化开发 - 非常详细,不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标 能够知道组件化开发思想 能够知道组件的注册方式 能够说出组件间的数 ...
- Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤 组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
- Vue.js的组件化开发
组件化开发 什么是组件? web中的组件其实就是页面组成的一部分, 好比是电脑中的每一个元件(如硬盘.键盘.鼠标), 它是一个具有独立的逻辑和功能或界面, 同时又能根据规定的接口规则进行相互融化, 变 ...
最新文章
- uses 子句的写法
- Android开发-实现第三方APP跳转
- C中结构体的存储分配
- Boost:boost::source_location的用法测试程序
- 详解Python垃圾回收机制
- linux上部署hadoop集群 HA-QJM篇
- 第二阶段团队冲刺(七)
- 最全三大框架整合(使用映射)——数据库资源文件jdbc.properties
- ZOJ 1234 UVA 10271 Chopsticks
- vb 复制 剪贴板 html,VB把选中的内容复制到剪切板
- ElasticStack系列之九 master、data 和 client 节点
- Django REST framework 中文文档
- 1.用 perf report 分析四个for进程
- Android小白快速编写APP登录界面
- 带有H5标签的字符串
- 你的CRM系统为什么用不起来?
- [概念]图像分割的历史 + UNet-Family
- ORACLE公司的历史
- 制作可以用航模遥控器遥控的ESP32小车
- Java · 认识 String 类(上)· 创建字符串 · 字符串比较相等 · 字符串常量池 · 字符串不可变 · 字符字节与字符串
热门文章
- fx 线程 弹窗_JFXPanel和FX Platform线程陷阱
- spring预加载与懒加载_通过Spring将继承树加载到List中
- Java Stream:第2部分,计数始终是计数吗?
- Spring Data Redis:Sentinel的高可用性
- moreunit_MoreUnit与MoreUnit
- jms spring_JMS和Spring:有时很重要的小事情
- 具有Stormpath和Spring Boot的OAuth 2.0令牌管理
- mvc crud_Spring MVC3 Hibernate CRUD示例应用程序
- Hibernate陷阱
- 净值:测试编码器/解码器