slot插槽（学习笔记）
slot插槽（有默认值，也有名称）一般情况下通过名称进行匹配
什么是插槽，有什么用？插槽相当于插入的一个东西，可以用来灵活的封装组件，比如说封装一个模态框
对组件进行内容的定制，slot插槽，一对组件标签中的结构，最终会被插入到组件的模板中去的
使用方法思路：子组件定义完成。需要灵活的改变子组件里面的东西。可以在子组件注册的标签里面写<slot></slot>来完成内容替换，当然有name来进行标识是最好的
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<modal>
<h1 slot="title">{{title}}</h1>
<div slot="content">
<p>1</p>
<p>2</p>
<div>我是插件的内容部分</div>
</div>
</modal>
</div>
</body>
<script src="vue.js"></script>
<script>
/*
对组件进行内容的定制
slot插槽
一对组件标签中的结构，最终会被插入到组件的模板中
*/ Vue.component('modal',{
data(){
return {
title:"modal的标题"
}
},
template:`
<div class="box">
<div class="title">
<slot name="title"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
我是一个底部
</div>
</div>
`
}) new Vue({
el:"#app",
data(){
return {
title:'父组件title插槽'
}
}
})
</script> <style>
.box{
font-size:14px;
width: 400px;
height: 260px;
border:2px solid #F60;
margin:0px auto;
}
.title{
border-bottom:1px solid #999;
}
.content{
border-bottom:1px solid #999;
}
</style>
</html>
slot插槽（学习笔记）的更多相关文章
- 组件基础(插槽slot)—Vue学习笔记
刚开始我们淡淡提过<slot></slot>现在深入了解一下. slot可以进行父组件传值到子组件. 比如:我们将hiboy通过<slot>传递到组件中. < ...
- redis 学习笔记(6)-cluster集群搭建
上次写redis的学习笔记还是2014年,一转眼已经快2年过去了,在段时间里,redis最大的变化之一就是cluster功能的正式发布,以前要搞redis集群,得借助一致性hash来自己搞shardi ...
- Redis 学习笔记4： Redis 3.2.1 集群搭建
在CenOS 6.7 linux环境下搭建Redis 集群环境 1.下载最新的Redis版本 本人下载的Redis版本是3.2.1版本,下载之后,解压,编译(make): 具体操作可以参考我的博文:R ...
- VueJs 学习笔记
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
- redis 学习笔记-cluster集群搭建
一.下载最新版redis 编译 目前最新版是3.0.7,下载地址:http://www.redis.io/download 编译很简单,一个make命令即可,不清楚的同学,可参考我之前的笔记: red ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
随机推荐
- 使用gson进行数据（集合数据）的转换 并且返回给前端 进行动态解析 并添加
后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时 需要把得到的字符串 转换为object数组 -------------- ...
- 工具-常用VS插件
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为各ASP.NET 开发者介绍一些高效实用的工具,涉及SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节, ...
- 洛谷——P1030 求先序排列
https://www.luogu.org/problem/show?pid=1030#sub 题目描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度< ...
- 菜鸟的mongoDB学习－－－（六）MongoDB 索引
MongoDB 索引 ps:大概有半个月木有更新了,因为前一阶段的出差和这几天突然来的项目.导致上网时间急剧降低,实在是sorry,以后预计会好一点. 索引通常可以极大的提高查询的效率.假设没有索引. ...
- Hadoop高速入门
Hadoop高速入门 先决条件 支持平台 GNU/Linux是产品开发和执行的平台. Hadoop已在有2000个节点的GNU/Linux主机组成的集群系统上得到验证. Win32平台是作为开发平台支 ...
- android开发一些小bug
1.一定要注意findViewId这种方法,尤其是含有多个同样的R.id的名字时,debug时不会当场报错.但随后会报空指针错误 2.List转换为Array能够这样处理: ArrayList< ...
- centos6配置固定ip地址（选择桥接模式）
1.配置ifcfg-eth0 vim /etc/sysconfig/network-scripts/ifcfg-eth0 首先把BOOTPROTO="dhcp"改成BOOTPROT ...
- 【POJ 2182】Lost Cows
[题目链接] http://poj.org/problem?id=2182 [算法] 树状数组 + 二分 [代码] #include <algorithm> #include <bi ...
- Node.js：连接 MySQL
ylbtech-Node.js:连接 MySQL 1.返回顶部 1. Node.js 连接 MySQL 本章节我们将为大家介绍如何使用 Node.js 来连接 MySQL,并对数据库进行操作. 如果你 ...
- 1.Win32基本程序概念
还没学会走之前,不要跑! Message based , event driven 每个程序都应该有一个如下的循环:MSG msg;while(GetMessage(&msg,NULL,NUL ...