组件参数校验

 <!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特性的更多相关文章

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

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

  2. vue组件参数校验

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. vuejs组件参数校验

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

  4. react中直接调用子组件的方法（非props方式）

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  5. 深入理解 Vue 组件

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

  6. vue组件学习(二)

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

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

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

  8. [Props] vue组件间的传值及校验

    基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message props: ...

  9. vue组件的props

    刚开始学习vue组件的时候经常被 props这个传值搞晕,做个笔记 Vue.component('item', { template: '#item-template', props: { model ...

随机推荐

  1. HDU-3333 Turing Tree 分块求区间不同数和

    HDU-3333 Turning Tree 题目大意:先给出n个数字.面对q个询问区间,输出这个区间不同数的和. 题解:这道题有几种解法.这里讲一下用分块解决的方法.( 离线树状数组解法看这里 Hdu ...

  2. python5数据存储

    1 txt文件存储 正常调用文件python文件操作 https://www.cnblogs.com/x2x3/p/9979919.html 2 json文件存储 在JavaScript语言中,一切都 ...

  3. 解密native代码的内存使用

    前言 无论是从资源使用的角度,还是从发现内存泄漏问题的角度来看,在性能测试或者系统的稳定性测试中,内存的使用情况是一个很重要的监控点.为保证项目的质量前移,输入法内核测试小组的同学分配到了一个新的任务 ...

  4. 【串线篇】SpringMvc数据传出

    /** * SpringMVC除过在方法上传入原生的request和session外还能怎么样把数据带给页面 *  * 四大域: *  pageContext:${pageScope.msg }< ...

  5. Python3.5-20190518-廖老师-自我笔记-模块

    在Python中,一个.py文件就称之为一个模块(Module) 可以作为module的文件类型有".py".".pyo".".pyc".& ...

  6. Nginx是什么？为什么选择Nginx做服务器软件？有什么优势？

    代理服务器基础知识 Nginx是什么? 为什么选择Nginx 1.代理服务器基础知识 a.代理服务器 一般是指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端.应用 ...

  7. 【记录】Java NIO实现网络模块遇到的BUG

    1.背景 通过JavaNio实现一个简单的网络模块,有点像Netty的线程模型,一个线程(AcceptThread)建立新连接,把新连接绑定到某个SelectorThread,SelectorThre ...

  8. Steup factory 面板介绍

    2   安装软件信息     注册码  过期时间等一些设置 3 4 5

  9. Python--基础之socket编程

    一 客户端/服务器架构 即C/S架构,包括 1.硬件C/S架构(打印机) 2.软件C/S架构(web服务) 美好的愿望: 最常用的软件服务器是 Web 服务器.一台机器里放一些网页或 Web 应用程序 ...

  10. shell--grep命令+正则表达式+基本语法

    什么是正则 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则. 在linux中,通配符是由shell解释的,而正则表达式则 ...