代码：

<!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. TIKA环境配置

    本章将指导完成设置Apache Tika在Windows和Linux的配置过程.用户管理是必要的,同时安装了Apache Tika. 系统要求 JDK Java SE 2 JDK 1.6 或以上 内存 ...

  2. Error: EBUSY: resource busy or locked, symlink "xxx" 的解决方法

    上面是报错信息. 解决方法:当我们在npm i 安装依赖的时候,会遇到这个Error: EBUSY: resource busy or locked, symlink....的问题.解决的 办法就是关 ...

  3. C++公有继承、私有继承以及友元

    公有继承: 基类的成员在派生类中维持原来的访问权限,基类的publice成员为派生类的public成员,基类的protected成员为派生类的protected成员,基类的private成员在派生类的 ...

  4. NIO 源码分析(04) 从 SelectorProvider 看 JDK SPI 机制

    目录 一.SelectorProvider SPI 二.SelectorProvider 加载过程 2.1 SelectorProvider 加载 2.2 Windows 下 DefaultSelec ...

  5. Java多态的实现机制是什么，写得非常好！

    作者:crane_practice www.cnblogs.com/crane-practice/p/3671074.html Java多态的实现机制是父类或接口定义的引用变量可以指向子类或实现类的实 ...

  6. 「CSP-S 2019」树的重心

    题目 考场上送\(75pts\)真实良心,正解不难:考虑直接对于每一个点算割掉多少条边能使得这个点成为重心,不难发现对于一个不是重心的点,我们要割掉的那条边一定在那个大于\(\lfloor \frac ...

  7. sqlserver 如何瞬间执行上万条数据

    核心的内容是:使用自定义表类型 第一步:创建存储过程P_T1DeclareInfo_Upload_new 参数: T1DeclareInfo_UploadPNSN_Param  类型 T1Declar ...

  8. java访问https绕过证书信任

    package com.xing.test; import java.io.BufferedReader; import java.io.IOException; import java.io.Inp ...

  9. thinkphp 模板驱动

    模板引擎驱动完成了第三方模板引擎的支持,通过定义模板引擎驱动,我们可以支持Smarty.TemplateLite.SmartTemplate和EaseTemplate等第三方模板引擎. 默认的模板引擎 ...

  10. fastJson中常用方法以及遇到的“坑”

    1.使用fastJson,首先引入fastJson依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> & ...