vue学习笔记--非props特性和props特性

2021-09-13

props是用来接收父组件数据的，子组件不可以直接更改props接收的数据，即单向数据流概念。
一、非props特性：
1.子组件未通过props接收，不能显示在dom上；

文章图片
image.png

文章图片
image.png 2.子组件模板内直接写入内容而非插值表达式，会显示在dom最外层标签上

文章图片
image.png
文章图片
image.png 【vue学习笔记--非props特性和props特性】二、props的特性
概括为父组件传，子组件接,dom标签内直接用

文章图片
image.png 1、props大小写
props在接收一个非字符串模板使用在dom中的时候，需要转换成相应的短横线命名法，但是如果是字符串模板，就不用转换。
2.prosp类型
a.字符串
如：props:['title']
b.数组
如：props：[ 'title','auther','time' ]
c以对象形式列出的名称：类型
如：props:{
title:String
auther:Array
time: String
}
2、传递静待或动态的值类型给prop
数字、布尔值、数组、对象、对象的虽有属性。
3、props验证
a. type
类型：String、Number、Boolean、Array、Object、Data、Function、Symbol(用来表示独一无二的值),构造函数
prop验证：
html:

//表示传递的参数是number 类型

script：

props:{
mes:String
},
//表示子组件希望接收的mes type 为String 类型，但是在上一段代码中，传递的却是number类型，结果报错

vue学习笔记--非props特性和props特性

文章图片
image.png 完整代码截图：

vue学习笔记--非props特性和props特性

文章图片
image.png 如果子组件希望父组件传递的值是多元的，比如既可以是Number也可以是String，那么

props:[ String, Number ]

如果希望父组件必要或者非必要传入某个值，那么 required:ture/false即可
b. required:

props:{
mes{
type:String
required:ture
}
}

vue学习笔记--非props特性和props特性

文章图片
image.png
如果父组件没有传mes 给子组件，而子组件通过 required:true 要求mes 为必传，就会报错。

vue学习笔记--非props特性和props特性

文章图片
image.png c. defualt:
如果父组件不向子组件传递mes,而且子组件要求 required:false,defualt 的值就会显示在页面中

vue学习笔记--非props特性和props特性

文章图片
image.png d. validator:
如果子组件希望规定父组件传递的值长度，用自定义校验器validator

vue学习笔记--非props特性和props特性

文章图片
image.png 长度如不符合要求即控制台报错

vue学习笔记--非props特性和props特性

文章图片
image.png

推荐阅读

上一篇：三生三世佛玲花开2

下一篇：2020年最后一天