vue组件参数校验与非props特性
组件参数校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<child :content="'abc'"></child>
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child', {
props: {
content: {
//参数校验
type: String,//:content的类型，也可以写[String, Number]
required: true,//:content是否必须写，true是必须，false是不必须
default: 'default value',//若required:false时，页面显示的默认值
validator: function(value) {//自定义校验器
return (value.length > 5)
}
}
},
template: '<div>{{content}}</div>'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
props特性
子组件有props,父组件传递content,子组件接收content
非props特性
父组件传递content,子组件没有props,没接收content。1、使用content时报错。2、content属性会展示在子组件最外层的dom标签html属性里面
vue组件参数校验与非props特性的更多相关文章
- 4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...
- vue组件参数校验
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vuejs组件参数校验
父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验 需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢 <div id='root'> <c ...
- react中直接调用子组件的方法（非props方式）
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
- vue组件学习(二)
父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...
- 第四章、深入理解vue组件
4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...
- [Props] vue组件间的传值及校验
基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message props: ...
- vue组件的props
刚开始学习vue组件的时候经常被 props这个传值搞晕,做个笔记 Vue.component('item', { template: '#item-template', props: { model ...
随机推荐
- 链接socket加异常
try { channel = AmqpClient::Channel::Create("10.10.22.105", 5672, "admin", " ...
- 六、SpringBoot配置@ConfigurationProperties与@Value区别
1.@Value的使用 三种用法 // ${key} 从环境变量.配置文件中取值 @Value("${person.last-name}") private String last ...
- SQL笔试题：下面是学生表（student）的结构说明
SQL笔试题:下面是学生表(student)的结构说明 SQL笔试题:下面是学生表(student)的结构说明 字段名称 字段解释 字段类型 字段长度 约束 s_id 学号 字符 10 PK s_na ...
- java命令-jstat/ javap
jstat命令对应用程序资源和性能进行实时监控 常用参数列举如下: 1. jstat -class pid 显示加载class的数量.所占空间.所耗时间等信息 2.jstat -compiler pi ...
- vue部分问题
[color=#00b050]学 vue 的看过来,vue-cli 挺好用的,但是遇到具体情况还得做一部分调整和配置默认你已经成功启动 vue-cli 1.使用 scsscnpm i node-sas ...
- disk或者Partition镜像的制作
备份镜像还原一般都是在client-server端这边才有涉及,不过作为平时爱折腾的咸鱼,表示偶尔玩玩这种操作也不错: 工具:pc X 1(装有 大白菜,装机吧,一类制作pe软件的即可,大同小异) ...
- JavaSE---多线程---Callable、Future
1.概述 1.1 JDK1.5后,Java提供了Callable接口,该接口提供一个call方法作为线程执行体,该call方法可以 有返回值.声明抛出异常: 因此,我们可以直接将Callable接口 ...
- Vue.js（五）
前后端交互概述与URL地址格式 JS中常见的异步调用: 定时任务 ajax 事件函数 接口调用方式: 原生ajax 基于jQuery的ajax fetch axios url 地址格式: 传统的url ...
- MDK（keil）4.7中文注释乱码解决
由于编码使用不统一导致别的开发环境下的文件在MDK(keil)下打开中文显示乱码,解决这一问题需要进行码制转换, 可以先将欲打开的文件转换成UTF-8格式(如在notepad中进行转换),也可以在打开 ...
- postgreSQL执行计划
" class="wiz-editor-body wiz-readonly" contenteditable="false"> explain命 ...