代码：

<!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. 第十二篇 requests模拟登陆知乎

    了解http常见状态码 可以通过输入错误的密码来找到登陆知乎的post:url 把Headers拉到底部,可以看到form data _xsrf是需要发送的,需要发送给服务端,否则会返回403错误,提 ...

  2. jetson nano VNC

    寻找比较好的远程桌面方式,最新系统里有写. ======================================================================= README ...

  3. 因kernel too old 而 centos6.8 升级内核

    因为docker运行centos 的时候,报错了,错误为kernel too old .我看了一下是因为os的内核不行了,需要升级下内核. 查看默认版本: uname -r 忘记截图了,内核大概是2. ...

  4. Pregel Worker

  5. Center OS 7 Apache安装配置

    感谢:https://blog.csdn.net/u014157384/article/details/79497761 该作者的帮助. 自己购买了国外的服务器,想把我的网页放到服务器,网页是以web ...

  6. dev 中 字符串转中文拼音缩写，对grid列表进行模糊匹配，grid获取焦点行，gridlookupedit控件用拼音模糊匹配下拉选项

    番外篇:. //该方法是将字符串转化为中文拼音的首写字母大写, public static string RemoveSpecialCharacters(string str){try{if (str ...

  7. vue之axios的使用

    一.环境安装 1.axios的安装 进入到对应工程目录执行: npm install axios 2.启动测试数据的API 测试项目地址:https://github.com/ShenJianPing ...

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

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

  9. SQL Server SQLBindCol

    说明 编辑 版本引入:ODBC 1.0 遵从标准:ISO 92 功能说明: SQLBindCol将应用程序的数据缓冲绑定到结果集的各列 函数原型: SQLRETURN SQLBindCol( SQLH ...

  10. Ruby 环境变量

    Ruby 环境变量 Ruby 解释器使用下列环境变量来控制它的行为.ENV 对象包含了所有当前设置的环境变量列表. 变量 描述 DLN_LIBRARY_PATH 动态加载模块搜索的路径. HOME 当 ...