代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>父子组件传值</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>

<body>

     <div id="root">

         <child content="you"></child>

     </div>

     <script>

         Vue.component('child',{

               props:{

                  content:{

                      type:String,

                      validator:function(value) {

                           return  (value.length>5)

                      }

                  }

               },

               template:'<div>{{content}}</div>'

         });

         var vm=new Vue({

             el:'#root'

         })

     </script>

</body>

</html>

　　效果：

修改content的内容：

将

<child content="you "></child> 
改为

<child content="helloworld"></child
>
效果：

这就是参数校验

vue组件参数校验的更多相关文章

  1. vue组件参数校验与非props特性

    组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. 4-3 组件参数校验与非props特性

    本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...

  3. vuejs组件参数校验

    父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验 需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢 <div id='root'> <c ...

  4. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

  5. vue组件的基本知识点

    1. 组件中 is 的特性: 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格 ...

  6. vue组件学习(二)

    父子组件之间的数据传递, 父传给子: 直接在组件上传,如:<count :number="2"> (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的 ...

  7. vue组件使用细节

    ref 当ref写在一个标签元素中,通过this.$refs.name 获取的是标签对应的dom元素 <section id="app" ref="froggy&q ...

  8. 第四章、深入理解vue组件

    4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...

  9. vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

    一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...

随机推荐

  1. XStream环境设置

    为Windows 2000/XP设置路径: 假设安装在c:Program Filesjavajdk目录: 在“我的电脑”右键单击并选择“属性”. 在“高级”选项卡下单击“环境变量”按钮. 现在,改变“ ...

  2. docker镜像私有仓库

    两台centos7的机器 192.168.100.151 docker镜像 192.168.100.157 docker私有仓库 步骤一 192.168.100.157主机开启私有仓库功能 docke ...

  3. $.Deferred 对象详解

    1.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  4. python的三种特性

    1.封装 什么时候用函数? 各个函数之间是独立的且无共用的数据. 什么时候用类? 函数之间是相关的,且有共用的数据,则可以使用类来封装. 所谓的封装: (1)使用构造方法将内容封装到 对象 中. (2 ...

  5. android中的属性资源

    属性资源可以很好的控制自定义View组件的外观行为. 属性资源放置在/res/values目录下,属性资源文件的根目录元素是<resources.../>,该元素包含如下两个子元素: at ...

  6. springboot + zipkin（brave-okhttp实现）

    一.前提 1.zipkin基本知识:附8 zipkin 2.启动zipkin server: 2.1.在官网下载服务jar,http://zipkin.io/pages/quickstart.html ...

  7. linux常用命令 满足99%的开发需要

    1.# 表示权限用户(如:root),$ 表示普通用户开机提示:Login:输入用户名password:输入口令 用户是系统注册用户成功登陆后,可以进入相应的用户环境.退出当前shell,输入:exi ...

  8. JavaScript深浅拷贝区别

    分享一篇自己关注的微信订阅号(前端大全)文章:JavaScript浅拷贝与深拷贝 作者:浪里行舟 https://github.com/ljianshu/Blog/issues/5 这里很详细的讲解了 ...

  9. No package docker-io available

    新手centos6.8安装docker时从遇到No package docker-io available开始的各种不小心的坑... 新安装了CentOS6.8,准备安装docker,执行命令 yum ...

  10. Tomcat服务器优化（内存，并发连接数，缓存）

    a) 内存优化:主要是对Tomcat启动参数进行优化,我们可以在Tomcat启动脚本中修改它的最大内存数等等.b) 线程数优化:Tomcat的并发连接参数,主要在Tomcat配置文件中server.x ...