组件参数校验

 <!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. cglib代理与jdk动态代理示例

    先看基于jdk实现的动态代理实现例子 1.先声明一个接口类 public interface UserService{ public String getName(String msg); } 2.实 ...

  2. 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法

    微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...

  3. const char *转化为char *的方法

    直接将const char *赋值给char *是错误的,编译器不允许这种操作. #include "stdio.h" #include "string.h" ...

  4. Go(二)函数

    函数是一等公民 与其他主要编程语言的差异 1.可以有多个返回值 2.所有参数都是值传递 slice.map.channel会有传引用是错觉,如切片背后是数组,是一个数据结构,里面包含了指向对应数组的指 ...

  5. 前端每日实战：58# 视频演示如何用纯 CSS 创作一只卡通鹦鹉

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrRmWy 可交互视频 此视频是可 ...

  6. ListView 分页显示（转载+修改）下

    通过实践发现,尚大大在判断”上一页“按钮和”下一页按钮“是否可用的地方,有问题: 原代码: public void checkButton(){ //索引值小于等于0,表示不能向前翻页了,以经到了第一 ...

  7. SqlSession(SqlSessionTemplate类) 实现Mybatis

    yBatis3与spring整合之使用SqlSession(SqlSessionDaoTemplate类) ---------- 注:这是手工编写实现的方式(其实可以直接使用注入映射器的) SqlSe ...

  8. 2019ccpc秦皇岛/Gym102361 F Forest Program 仙人掌上dfs

    题意: 某地沙漠化严重,沙漠里长了很多仙人掌,现在要让你删掉仙人掌的一些边让它的所有连通分量都是树,就完成了沙漠绿化(什么鬼逻辑?)让你计算删边的方案数. 仙人掌是一种特殊的图,它的每一条边只属于1或 ...

  9. php中的list()

    list()在php中上一个语言结构,并不是一个函数.类似array(),不过array()这个东西我们现在一般很少使用了,因为从php5.4版本开始,我们会直接使用[]来定义数组. 那么,list( ...

  10. 深入解读 Redis 的持久化

    Redis持久化 Java大猿帅成长手册,GitHub JavaEgg ,N线互联网开发必备技能兵器谱 Redis 的数据全部在内存里,如果突然宕机,数据就会全部丢失,因此必须有一种机制来保证 Red ...