Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值，本章我们再来看一下父子组件间传值的参数校验和非 Props 特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :title="123"></child>
</div>
<script>
Vue.component("child", {
props: ['title'],
template: `
<p>{{title}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
},
})
</script>
</body>
</html>
上面的代码中我们我们在父组件中定义了一个 title 数据，并通过 :title="" 的形式将 title 数据传给子组件 child，然后子组件通过 props 属性接收该 title，通过 template 模板将 title 输出，结果如下：
但是我们现在有这样一个需求，子组件想要校验父组件传过来的值，如果符合才显示，那么我们就可以通过 props 属性进行校验，在上面的代码中我们定义 props 为一个数组对象，其实我们可以将 props 定义为一个对象，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :title="title"></child>
</div>
<script>
Vue.component("child", {
props: {
title: Number
},
template: `
<p>{{title}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
},
})
</script>
</body>
</html>
在上面的代码我们将 props 改为了对象形式，并且定义 title: Number，意思是将 title 定义为一个 Number 类型，我们现在在页面上看一下结果：
在控制台报错，意思说 tltle: "hello world" 是一个字符串，但我们在子组件定义为了一个 Number 类型，两者不符所以报错，所以我们可以将 props 下的 title 定义为 String 类型就可以了，当然我们也可以这样写 ： title: [Number, String] ，意思是传入的 title 值既可以是 Number 类型也可以是 String 类型。
在 props 下的数据我们还可以定义其他属性，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :title="title"></child>
</div>
<script>
Vue.component("child", {
props: {
title: {
type: [Number, String],
required: true,
default: "hi vue",
validator(value){
return value.length > 5
}
},
},
template: `
<p>{{title}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
},
})
</script>
</body>
</html>
上面的代码中我们将 props 中的 title 定义为了一个对象，对象中
type 表示验证父组件传入数据的类型，
required 表示该值是否必须传入，false 表示可以不传入，true 表示必须传入，即 <child> 标签内是否写 :title="" 传入该值。
default 表示传入该值的默认值，如果上面的 required 为 false 并且父组件并没有传入 title 值，我们可以自己定义 title 的值。
validator 表示验证的方法，我们可以自己定义传入值的校验方法，如传入值的长度等。
接下来我们说一下 props 特性和非 props 特性，在上面的代码中我们对父组件传过来的值都用 props 属性进行了接收，我们就可以把这个称为 props 特性，那它跟非 props 特性有什么区别的，非 props 特性就是我们不在 props 里接收父组件传过来的值，那么如果我们在子组件的 template 模板中使用该值，则会报错，同时非 props 特性会在 HTML 页面代码内暴露出传过来的值，即 title=""，props 特性则不会，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child :title="title"></child>
</div>
<script>
Vue.component("child", {
props: {
// title: {
// type: [Number, String],
// required: true,
// default: "hi vue",
// validator(value){
// return value.length > 5
// }
// },
},
template: `
<p>{{title}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
title: "hello world"
},
})
</script>
</body>
</html>
我们在 props 中没有接收父组件传过来的 title 数据就在 template 模板中使用，则会在控制台报错，且在 HTML 代码中将 title: "hello word" 暴露在了标签内。props 特性接收 title 值的会就不会出现上面的情况。
以上代码演示我们是基于引入开发环境的 js 来演示的，即
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
如果我们使用生产环境则不会出现上面的控制台警告报错，这是为了线上使用阅读者舒适的阅读，生产版本如下：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue 进阶之路（九）的更多相关文章
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- Nginx 怎么给一台服务器，配置两个域名？详细的解说+截图教程
一. 环境.条件准备 一台云服务器(我的是腾讯的centos7) 至少两个域名.(我的是simuhunluo.xyz和simuhunluo.top.这两个域名之间没有任何关系,我是在阿里 ...
- HashMap在高并发下如果没有处理线程安全会有怎样的安全隐患，具体表现是什么
Hashmap在并发环境下,可能出现的问题: 1.多线程put时可能会导致get无限循环,具体表现为CPU使用率100%: 原因:在向HashMap put元素时,会检查HashMap的容量是否足够, ...
- HTML学习笔记 day two
HTML学习笔记 day two Charter three网站中的文本样式标签 3．1设置标题字体 语法结构:<h#>标题文字</h#> 注:其中的#可以为1,2,3,4,5 ...
- Java对象和Excel转换工具XXL-EXCEL
<Java对象和Excel转换工具XXL-EXCEL> 一.简介 1.1 概述 XXL-EXCEL 是一个灵活的Java对象和Excel文档相互转换的工具. 一行代码完成Java对象和Ex ...
- 利用Python脚本悄无声息的遥控室友电脑开机密码！
整蛊一下室友就行了,切勿用于非法用途! 利用python脚本控制室友windows系统电脑的开机密码.利用random()生成随机数(密码),天知地知,密码只有你自己知道! Python代码分为cli ...
- 魔咒，90%未学满三个月Python编程的朋友都会出错！
Python语言虽然优美,简洁和强大,但是也有很多坑,一不小心就会掉进去.我学Python的时候也遇到过,今天总结一下,希望对大家能有收获! Python的默认参数就被创建 一次,而不是每次调用函数的 ...
- Python_自定义栈
customStack.py '''栈:是一种运算受限的线性表,其特点在于仅允许在一端进行元素的插入和删除操作,最后入栈的最先出栈,而最先入栈的元素最后出栈''' s = [] s.append(3) ...
- Oracle-13：Oracle中的表分区
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客记录了表分区 表分区的含义: 典型的拿空间换时间的案例! 表分区对一张表进行分区,分区之后表中的数据存 ...
- React Native在特赞的应用与实践
基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP 目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用 课 ...
- When to use next() and return next() in Node.js
Some people always write return next() is to ensure that the execution stops after triggering the ca ...