学习笔记:Vue——插槽
关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法。
01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。
02.父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
03.后备(默认)内容
<button type="submit">
<slot>Submit</slot>
</button>
04.具名插槽
<slot>元素有一个特殊的特性:name
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一个不带name的<slot>出口会带有隐含的名字"default"
05.作用域插槽
让插槽内容能够访问子组件中才有的数据是很有用的。
绑定在<slot>元素上的特性被称为插槽prop
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
独占默认插槽的缩写语法
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
只要出现多个插槽,请始终为所有的插槽使用完整的基于<template>的语法
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template> <template v-slot:other="otherSlotProps">
...
</template>
</current-user>
06.解构插槽Prop
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>
<current-user v-slot="{ user: person }">
{{ person.firstName }}
</current-user>
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{{ user.firstName }}
</current-user>
07.动态插槽名
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
08.具名插槽的缩写#
<base-layout>
<template #header>
<h1>Here might be a page title</h1>
</template> <p>A paragraph for the main content.</p>
<p>And another one.</p> <template #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
学习笔记:Vue——插槽的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-作用域插槽
有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数. <div id=" ...
- Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
- Vue2.x源码学习笔记-Vue源码调试
如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代 ...
- Vue2.x源码学习笔记-Vue构造函数
我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look se ...
随机推荐
- mysql 中sql 语句查询今天、昨天、近7天、近30天、一个月内、上一月数据
·1.几个小时内的数据 DATE_SUB(NOW(), INTERVAL 5 HOUR) 1 ·2.今天 select * from 表名 where to_days(时间字段名) = to_days ...
- WP8 学习笔记(001_环境配置)
Step 1 WP8 的开发要求64位操作系统,Windows 8及以上版本,需要激活版,建议网上买一个注册码.详见安装双系统. Step 2 安装好系统并已经激活之后,需要安装Windows Ph ...
- 【VC++学习笔记一】MFC操作Excel
最近在做一个读取Excel的功能,之前也做过相关的,但总是零零闪闪的,趁着正在劲头上,归纳一下: 利用Automation添加相关的类,在Excel2010中可以在安装文件夹下直接点击Excel.ex ...
- 洛谷 P3040 [USACO12JAN]贝尔分享Bale Share
P3040 [USACO12JAN]贝尔分享Bale Share 题目描述 Farmer John has just received a new shipment of N (1 <= N & ...
- 【Linux环境编程】获取网卡的实时网速
在windows以下.我们能够看到360或者是qq安全卫士的"安全球".上面显示实时的网速情况.那么在linux里面怎样获取网卡的实时网速?事实上原理非常easy,读取须要获取网速 ...
- HDU 2846 Repository (字典树 后缀建树)
Repository Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
- 谈谈iframe的优缺点
iframe是一种框架,也是一种很常见的网页嵌入方式,零度今天给大家分析分析它的优缺点. iframe的优点: 1.iframe能够原封不动的把嵌入的网页展现出来. 2.如果有多个网页引用iframe ...
- Spring Cloud Netflix Eureka client源码分析
1.client端 EurekaClient提供三个功能: EurekaClient API contracts are:* - provide the ability to get Instance ...
- 在Red Hat Linux服务器端假设NSF Server来进行Linux系统安装全过程
本教程讲述了通过在Red Hat Linux服务器端假设NSF Server来进行Linux系统安装的过程,并详细介绍了如何制作网络启动盘的细节.演示直观,讲解通俗易懂,特别适合初学者 ...
- VmWare 与 宿主主机通信 STEP BY STEP (适用于刚開始学习的人)
基本原理 在虚拟机中有三种通信方式,例如以下图所看到的 1. Bridged(桥接模式) 在桥接模式下,VMware虚拟出来的操作系统就像是局域网中的一独立的主机,它能够訪问网内不论什么一台机器只是你 ...