组件参数校验

 <!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. Delphi 访问https /SSL、OpenSSL

    访问 Web 网站,最简单用法直接使用 TIdHTTP 控件: 例如:AA := IdHTTP1.Get('www.baidu.com.'); 访问 https 的网站,需要 SSL 库. 在 Win ...

  2. SpringDataJpa全部依赖

    <properties> <spring.version>4.2.4.RELEASE</spring.version> <hibernate.version& ...

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

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

  4. BZOJ 3926: [Zjoi2015]诸神眷顾的幻想乡(后缀自动机)

    传送门 解题思路 因为叶节点不超过\(20\)个,所以可以枚举这些叶节点,并把这些节点当做根扫整棵树.可以证明所有的子串一定可以被便利到,然后可以对这些串建广义后缀自动机.\(dfs\)的时候要记录一 ...

  5. 用JOptionPane类实现各种对话框

    用JOptionPane类实现各种对话框 运行结果: 下面部分参考: JOptionPane类提示框的一些常用的方法 - - ITeye博客  http://847353020-qq-com.itey ...

  6. 爬取猎聘大数据岗位相关信息--Python

    猎聘网站搜索大数据关键字,只能显示100页,爬取这一百页的相关信息,以便做分析. __author__ = 'Fred Zhao' import requests from bs4 import Be ...

  7. MYSQL的SQL_CALC_FOUND_ROWS 和count(*)

    mysql的SQL_CALC_FOUND_ROWS 和 count(*) 在很多分页的程序中都这样写: SELECT COUNT(*) from `table` WHERE ......;  查出符合 ...

  8. PHP面试 AJAX基础内容

    AJAX基础内容 Ajax的基本工作原理 Ajax基础概念:通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新 Ajax工作原理:XMLHttpRequest是Ajax的基础     ...

  9. winform DataGridView的虚模式填充，CellValueNeeded事件的触发条件

    虚模式填充常用来处理大量数据,某个字段的显示问题. DataGridView是.net 2.0新增的表格数据编辑和显示控件,简单的数据显示和编辑,只需直接和数据源绑定就可以了. 对于 一些特殊情况,我 ...

  10. MVC路由解析---UrlRoutingModule

    文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 引言: 此文全文内容90%转自 一.前 ...