Vue学习笔记(八) 组件进阶

1、插槽

(1)插槽内容

像 HTML 元素一样,我们常常需要给组件传递内容

比如在下面的例子中,我们给自定义组件 prompt-info 传入 出错啦 的文本

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info>出错啦</prompt-info></div></body></html>

但是,结果并不像我们所想的,出错啦 的提示信息没有显示出来,这时候我们就可以使用 <slot> 解决这个问题

<slot> 就是插槽,也就是说我们需要先在组件中留下一个位置,然后才能在使用的时候把传入的内容放进去

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot></div>`
})

我们还可以为插槽提供默认内容,但是它仅仅会在没有提供内容的时候显示出来

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot>不好意思</slot></div>`
})

在定义好插槽后就可以正常显示传入的内容啦,事实上我们不仅可以传入简单的文本,还可以传入任何模板代码

<div id="app"><prompt-info><span>出错啦</span><p>请稍后再试</p></prompt-info>
</div>

(2)插槽数据

考虑一个问题,上面我们传入的模板代码中是没有包含数据的,假如现在我们使用数据会发生什么呢?

这里面还有一定的讲究

  • 数据在父级模板中定义,在父级模板中使用:例如下面的 msg
<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info>{{ msg }}</prompt-info></div></body></html>
  • 数据在子模板中定义,在子模板中使用:例如下面的 info
<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info></prompt-info></div></body></html>
  • 数据在子模板中定义,在父级模板中使用

这次没有这么简单,我们先来看一份简单的代码:

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info>{{ info }}</prompt-info></div></body></html>

实际上,这份代码不会被正确编译,控制台会输出错误信息:info is not defined

这是因为 父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的

如果我们希望让插槽内容访问子组件数据,可以怎么做呢?

首先,我们需要在 <slot> 元素上使用 v-bind 指令绑定数据(绑定在 <slot> 元素上的特性称为 插槽 prop

然后,我们就可以在组件上使用 v-slot 指令获取并使用 插槽 prop

(注意,在这里使用 v-slot 的语法为 v-slot='slotProps'

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info v-slot='slotProps'>{{ slotProps.info }}</prompt-info></div></body></html>

(3)具名插槽

好,下面我们再来考虑另一个问题,当我们需要使用多个插槽时,应该怎么对它们进行区分呢?

答案是在定义的时候使用 name 特性为插槽命名,然后在使用的时候还是使用 v-slot 指令指定插槽

(注意,在这里使用 v-slot 的语法为 v-slot:slotName,与上面的语法并不冲突)

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><prompt-info><template v-slot:header><p>服务离家出走啦</p></template><!-- 没有使用 v-slot 指令指定的元素默认放在 default 插槽 --><template><p>请稍后再试</p></template><template v-slot:footer><p>不好意思</p></template></prompt-info></div></body></html>
  • 具名插槽的缩写:

v-onv-bind 指令一样,Vue 也为 v-slot 指令提供了缩写

<!-- 完整语法 -->
<template v-slot:header>...</template><!-- 缩写 -->
<template #header>...</template>
  • 独占默认插槽的缩写:

当只有一个默认插槽时,我们可以直接把 v-slot 用在组件上:

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot></slot> </div>`
})
<prompt-info v-slot:default="slotProps"></prompt-info>

但是只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:

Vue.component('prompt-info', {template: `<div><h3>提示信息</h3><slot name="header"></slot><slot></slot> <slot name="footer"></slot></div>`
})
<prompt-info v-slot:default="slotProps"><template v-slot:header="slotProps"><!-- 内容 --></template><template v-slot:default="slotProps"><!-- 内容 --></template><template v-slot:footer="slotProps"><!-- 内容 --></template>
</prompt-info>

2、动态组件 & 异步组件

(1)动态组件

动态组件其实就是动态切换组件,我们可以通过 <component> 元素配合 is 特性实现,来看一个简单的例子

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><button v-for="tab in tabs" v-on:click="currentTab = tab">{{ tab }}</button><component v-bind:is="currentTabComponent"></component></div></body></html>

当每次切换组件时,Vue 都会创建一个 currentTabComponent 实例

但是,有的时候我们却希望能够保持组件的状态,以避免反复重渲染导致的性能问题

这时候我们可以通过 <keep-alive> 元素实现,包裹在该元素内的组件在第一次创建时会被缓存起来

<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>

(2)异步组件

异步组件其实就是异步加载组件,我们可以通过工厂函数定义组件,一个简单的例子如下

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><p>Hello</p><my-component></my-component></div></body></html>

我们还可以在工厂函数中返回 Promise 对象,把 webpack 和 ES2015 语法结合在一起使用

Vue.component('my-component', () => import('./async-component'))

3、边界情况

(1)访问元素

绝大多数情况下,我们不应该触及另一个组件实例内部或手动操作 DOM 元素,但是也的确存在这样的情况

  • 访问父级组件实例
<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><my-component></my-component></div></body></html>
  • 访问子组件实例
<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><button v-on:click="showMsg()">打印信息</button><my-component ref="page"></my-component></div></body></html>
  • 访问子元素
<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><button v-on:click="changeText()">改变文本</button><p ref="page">Hello World</p></div></body></html>
  • 依赖注入

使用 provide 选项指定提供什么数据给后代,然后在任何后代组件中都可以使用 inject 选项接收数据

<!DOCTYPE html>
<html><head><title>Demo</title></head><body><div id="app"><my-component></my-component></div></body></html>

转载于:https://www.cnblogs.com/wsmrzx/p/11219825.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263339.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php结合jquery异步上传图片(ajaxSubmit)

2019独角兽企业重金招聘Python工程师标准>>> php结合jquery异步上传图片&#xff08;ajaxSubmit&#xff09;&#xff0c;以下为提交页面代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T…

使 Framework 2.0 的程序集不用安装 Framework 就可以运行的工具免费发布了

感谢大家长时间以来对 MaxtoCode 的支持.Jason.NET 决定推出一款免费的 Framework 2.0 打包工具.它可以使你的 .NET 程序在不安装 Framework 的情况下依然正常运行. 下面有一个 著名的大型开源项目 SharpDevelop (C# 的 IDE) 的例子. 下载地址: http://www.maxtocode.com.cn/do…

LeetCode—287. 寻找重复数

287. 寻找重复数 题目描述&#xff1a; 给定一个包含 n 1 个整数的数组 nums &#xff0c;其数字都在 [1, n] 范围内&#xff08;包括 1 和 n&#xff09;&#xff0c;可知至少存在一个重复的整数。 假设 nums 只有一个重复的整数 &#xff0c;返回这个重复的数 。 你设计的…

发发牢骚,觉得走c#这条路,不该太浮躁

校园招聘结束了&#xff0c;腾讯&#xff0c;华为&#xff0c;百度&#xff0c;完美时空&#xff0c;网易&#xff0c;阿里&#xff0c;让我觉得.NET很受歧视。清一色的C/C,JAVA&#xff0c;只有网易有一点.Net的&#xff0c;但是都是非核心的运维工作。 不错&#xff0c;招.N…

Microsoft Windows Workflow Foundation 入门

Microsoft Windows Workflow Foundation 的包含在 .Net Framework 3.0 中&#xff0c;除此之外i&#xff0c;基于它做开发还要安装 Visual Studio 2005 Extensions for Windows Workflow Foundation 。本文撰写的对象为 Windows Workflow Foundation beta 1&#xff1a;开发人员…

套套

5.9 第一个跑入mc&#xff0c;人数不够&#xff0c;活动取消&#xff0c;未参加。5.12 网络断&#xff0c;在实验室开会5.14 网络断5.19 mc 1-9&#xff0c;20dkp&#xff0c;未拿东西5.26 mc 1-9 夜幕杀杀手护腿.-4 dkp5.30 购买 夜幕杀手护腕 100G6.2 和BWL活动冲突&#xff…

Typecho 新浪登陆插件 Sinauth

花了点时间弄了一个插件。 代码地址&#xff1a;https://github.com/web3d/plugins/tree/master/Sinauth Typecho的扩展机制还是比较完善的&#xff0c;可以自行增加Action、Route、扩展现有Widget功能、后台插件配置界面等。 偷懒&#xff0c;使用的是SAE中封装的sdk访问新浪开…

LeetCode—51. N 皇后(困难)

51. N 皇后&#xff08;困难&#xff09; 题目描述&#xff1a; n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击&#xff0c;即令其中任意两个皇后都不同列、同行和在一条斜线上。 给你一个整数 n &#xff0c;返回所有不…

使用javasript 遍历页面CheckBox

使用javasript 遍历页面CheckBox<html><head><script>function aaa(){var result"";for(var i0;i<checkform.checkboxlist.length;i){if(checkform.checkboxlist[i].checked){alert(checkform.checkboxlist[i].value);}else{……文章来源:http:…

unity 角色换装

unity角色换装的关键是更改角色部位上的物体的SkinnedMeshRenderer组件的属性&#xff1a; 更改mesh:mesh决定了部位的物体的外形&#xff0c;是主要的数据。 刷新骨骼&#xff1a;同一个部位下&#xff0c;不同的mesh受到的不同的骨骼的影响不同&#xff0c;因此更换mesh之后&…

Hadoop:pig 安装及入门示例

pig是hadoop的一个子项目&#xff0c;用于简化MapReduce的开发工作&#xff0c;可以用更人性化的脚本方式分析数据。 一、安装 a) 下载 从官网http://pig.apache.org下载最新版本(目前是0.14.0版本)&#xff0c;最新版本可以兼容hadop 0.x /1.x / 2.x版本&#xff0c;直接解压到…

SQL DISTINCT 多字段查询用法

使用distinct 的困惑: 我现在有一个表book有两个字段 作者 作品 auther article 记录值如下 张三 作品一 李四 作品二 张三 作品三 张三 作品四 李四 作品五 王五 作品六 我现在想读取每位作者的代表作和作者姓名 也就是如下数据 张三 作品一 李四 作品二 王五 作品六 如果用se…

LeetCode—289. 生命游戏

289. 生命游戏 题目描述&#xff1a; 根据 百度百科 &#xff0c; 生命游戏 &#xff0c;简称为 生命 &#xff0c;是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 给定一个包含 m n 个格子的面板&#xff0c;每一个格子都可以看成是一个细胞。每个细胞都具有一个初…

Java注解的基本概念和原理及其简单实用

一、注解的基本概念和原理及其简单实用 注解&#xff08;Annotation&#xff09;提供了一种安全的类似注释的机制&#xff0c;为我们在代码中添加信息提供了一种形式化得方法&#xff0c;使我们可以在稍后某个时刻方便的使用这些数据&#xff08;通过解析注解来使用这些数据&am…

js事件传参

阻止事件发生之前就执行了函数 除了创建匿名函数 function foo(a){console.log(a); } document.οnclickfoo(1) //document.οnclickfunction(){foo(1)}// document.addEventListener(click,foo(1),false)另外有bind() function foo(a){console.log(a); } document.οnclickfoo…

cin、cin.get()、cin.getline()、getline()、gets()等函数的用法(转)

学C的时候&#xff0c;这几个输入函数弄的有点迷糊&#xff1b;这里做个小结&#xff0c;为了自己复习&#xff0c;也希望对后来者能有所帮助&#xff0c;如果有差错的地方还请各位多多指教&#xff08;本文所有程序均通过VC 6.0运行&#xff09;转载请保留作者信息&#xff1b…

LeetCode—295. 数据流的中位数(困难)

295. 数据流的中位数&#xff08;困难&#xff09; 题目描述&#xff1a; 中位数是有序列表中间的数。如果列表长度是偶数&#xff0c;中位数则是中间两个数的平均值。 例如&#xff0c; [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 3) / 2 2.5 设计一个支持以下两种操作的数…

Atlas Samples Suse Linux 10.1

http://asyncpostback.com/ 这是一个展示Altas的相关Features的例子网站,网站的所有例子都有代码,是学习Altas的绝好教程Novell 发布了 SUSE Linux 10.1. 这个版本包含完整的Mono 开发环境和许多基于Mono的桌面应用. 对于专注于.net开发的你非常有必要来了解Mono.因为Mono的支持…

sudo apt-get update 与 sudo apt-get upgrate 的区别

1.sudo gedit /etc/apt/sources.list 源列表里面放置的一行行网址&#xff0c;在这个文件里加入或者注释&#xff08;加#&#xff09;掉一些源后&#xff0c;保存。这时候&#xff0c;我们的源列表里指向的软件就会增加或减少一部分 2. sudo apt-get update 这个命令&#xff…

oracle索引建立

1、明确地创建索引create index index_name on table_name(field_name)tablespace tablespace_namepctfree 5initrans 2maxtrans 255storage(minextents 1maxextents 16382pctincrease 0);2、创建基于函数的索引常用与UPPER、LOWER、TO_CHAR(date)等函数分类上&#xff0c;例&a…