代码：

<!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. 在命令行中运行Hadoop自带的WordCount程序

    1.启动所有的线程服务 start-all.sh 记得要查看线程是否启动 jps 2.在根目录创建 wordcount.txt 文件 放置一些数据 3.创建  hdfs dfs -mkdir /文件夹 ...

  2. mysql动态列--统计报表信息对比

    SET @sql = NULL; SELECT GROUP_CONCAT(DISTINCT CONCAT( 'MAX(IF(tmp.summary = ''', tp.summary, ''', tm ...

  3. [未解决]报错:SSLError

    参考网友解决的方法 任何报SSLError类的错,解决方法: 引入ssl模块 import ssl 在url链接代码上方添加语句: ssl._create_default_https_context ...

  4. [待解决]报错:JSON parse error: Unexpected character

    {"code":"9999","message":"JSON parse error: Unexpected character ...

  5. Redis数据结构之字典-dict

    dict是Redis服务器中出现最为频繁的复合型数据结构,除hash使用dict之外,整个Redis数据库中所有的key和value也会组成一个全局字典,还有带过期时间的key集合也是一个字典. zs ...

  6. SharpDx

    layout category title permalink posts_by_category SharpDX SharpDX 系列 /post/sharpdx

  7. PC端写的API接口和手机端APP联合调试

    一.遇到问题的情况:项目框架:asp.net MVC5 ,写的给手机端调用的API接口. 二.自己在本地 IIS上部署项目,在手机端的请求服务器上把地址和端口换上本地部署的,如图所示 三.用管理员的身 ...

  8. twentytwenty插件，图片对比轮播

    https://zurb.com/playground/twentytwenty 项目应用 http://decortrim.mml.digital/

  9. 【Codeforces Round #589 (Div. 2) D】Complete Tripartite

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 其实这道题感觉有点狗. 思路大概是这样 先让所有的点都在1集合中. 然后随便选一个点x,访问它的出度y 显然tag[y]=2 因为和他相连了嘛 ...

  10. Android中使用占位符

    Android中占位符的使用 有些朋友可能会动态的修改Android中strings.xml文件中的值,在这里给大家推荐一种简单的方法. strings.xml中节点是支持占位符的,如下所示: < ...