vue教程(三)-slot\keep-alive的使用
一、slot其实就是填坑操作,父组件传递dom结构,是vue提供的一种内置组件(组件知识请查看上篇博客内容)
写法:<slot></slot>
例子:
var child = {template:'<div><slot></slot></div>'} //子组件中预留出坑来,让父组件填坑
Vue.component('my-child',child);//全局注册方式
父中使用
var App = {template:'<my-child><button>填入按钮</button></my-child>'} //父组件中使用子组件,并传入button按钮。
当子组件预留出多个坑时,需要给坑指定name属性,例如
var child = {template:'<div><slot name='one'></slot><slot name='two'></slot></div>'} //子组件中预留出多个坑来,让父组件填坑,则需要指定name属性
父中使用
var App = {template:'<my-child><button slot='one'>填入按钮</button><h1slot='two'>填入标题</h1></my-child>'} //父组件中使用子组件,需使用slot属性指定填入到哪个坑中
二、keep-alive
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。
因此再动态变化填充dom时,一般使用keep-alive包裹,在上述两个生命周期钩子中进行相关操作,从而达到业务需要。
注:git上有开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址,也可以扫码加入QQ交流群
vue教程(三)-slot\keep-alive的使用的更多相关文章
- 8.Vue组件三---slot插槽
主要内容: 1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- 一天带你入门到放弃vue.js(三)
自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- PySide——Python图形化界面入门教程(三)
PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
- Vue的安装及使用(Vue的三种安装使用方式)
vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库,我们 ...
- CRL快速开发框架系列教程三(更新数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
随机推荐
- 【canvas】基础练习二 文字
demo1 fillText strokeText绘制文字 <!DOCTYPE html> <html lang="en"> <head> &l ...
- Linux用户和权限
用户和用户组管理 linux使用用户和组来限制资源的使用. 在linux上运行任何程序或命令都要以一个具体的用户来运行,这个用户的权限决定了相应的程序能访问的资源和能执行的操作. 用户相关命令 组是用 ...
- python中的内置函数(一)
内置函数:内置函数就是python提供的,可以拿来直接用的函数 作用域相关 locals():返回当前作用域中的名字globals():返回全局作用域中的内容 def func(): print('我 ...
- windows环境利用hexo+github搭建个人博客
一.下载安装Git 下载地址:https://gitforwindows.org/ 二.下载安装node.js 下载地址:https://nodejs.org/en/ 三.安装hexo 利用 npm ...
- 怎么安装IDEA?
我们使用的是的2017.3.4版本: 然后弹出激活窗口 破解方法: 1.下载破解插件JetbrainsCrack-2.7-release-str.jar 2.把插件放到安装目录下的bin文件夹下 3. ...
- java8 异步api、循环、日期
java8 异步api.循环.日期 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/10801470.html 异步api 对于多任务耗时的业务场景,一般我们会用 ...
- SHELL 中条件语句的运用 if for 条件测试语句
if条件测试语句可以让脚本根据实际情况自动执行相应的命令.从技术角度来讲,if语句分为单分支结构.双分支结构.多分支结构:其复杂度随着灵活度一起逐级上升. if条件语句的单分支结构由if.then.f ...
- pycharm同步代码到linux(转)
pycharm是一个非常强大的python开发工具,现在很多代码最终在线上跑的环境都是linux,而开发环境可能还是windows下开发,这就需要经常在linux上进行调试,或者在linux对代码进行 ...
- 【HDU - 3085】Nightmare Ⅱ(bfs)
-->Nightmare Ⅱ 原题太复杂,直接简单的讲中文吧 Descriptions: X表示墙 .表示路 M,G表示两个人 Z表示鬼 M要去找G但是有两个鬼(Z)会阻碍他们,每一轮都是M和G ...
- TCP中的粘包问题,以及用TCP和UDP实现多次聊天
TCP协议 在连接内多和客户端说几句 #server端 import socket sk = socket.socket() sk.bind(('127.0.0.1',9001)) sk.listen ...