组件参数校验

 <!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. ASN.1

    ASN.1抽象语法标记(Abstract Syntax Notation One https://baike.baidu.com/item/ASN.1/498523?fr=aladdin

  2. 如何用Word制作斜线表头？

    如何用Word制作斜线表头?遇到这种问题,你一般是如何操作?本期企业网盘坚果云干货分享与大家分享有关斜线表头的制作方法. 斜线表头分单斜线表头和多斜线表头,下面分情况来了解相关的解决办法. 单斜线表头 ...

  3. spring 获取url参数

    1. usl格式: http://localhost:8080/contact/delete/3 java代码 @RequestMapping(value="/delete/{id}&quo ...

  4. php 安装zip模块

    为php安装zip扩展 wget http://pecl.php.net/get/zip-1.13.5.tgz tar -zvxf zip-1.13.5.tgz cd zip-1.13.5 /home ...

  5. flume源码

    IDEA查看源码 IDEA快捷键 1 查看接口的实现类:Ctrl+Alt+B 选中按快捷键,然后跳到实现类的地方去 2 切换页面:Alt+<- 和 Alt+-> Alt+-> 3 查 ...

  6. nohup及crontab定时任务

    一.关于nohup: 1.假设有一 tash.sh 启动是:nohup /home/spex/bin_prodDemo/task.sh &                         一定 ...

  7. <自动化测试>之<Selenium API 的用法1>

    今天,简单,举例说一下在用python+selenium中元素定位的主要方法,第一部分是单个元素的操作,第二部分是一类元素的操作,实际操作中注意区分 #!/usr/bin/env python # - ...

  8. Git GUI使用方法【转】

    前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点多,而且还是会给我带来很多多余且重复的操作负担,所以我希望能压缩一下它在我工作中的成本,但是搜索了一下并 ...

  9. 【Spring Boot】Spring Boot项目设置多个配置文件，并在生产环境中的Tomcat设置对应的配置文件

    1.修改Spring Boot项目配置文件 除了主配置文件,另外创建2个配置文件,注意命名要用application-*.properties 主配置文件中写入,使用dev作为开发配置 spring. ...

  10. Django中object.all是什么东西

    前言 先抛出一个问题.银行就相当于一个数据库,你去银行取钱存钱办卡销卡,是你告诉银行柜员方便还是你自己去操作电脑办卡取卡方便?(你还不一定会,假设自动存款机还没发明),object在数据库中就相当于银 ...