组件参数校验

 <!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. Codeforces 1178E

    题意:给你一个长度为n的字符串,只包含a, b, c3种字符,字符串中相邻字符一定不同,问是否存在一个长度为n / 2(向下取整)的子序列是回文的,有就输出. 思路:相邻的字符一定不同,并且一共只有3 ...

  2. 前端学习(二十三）DOM操作，事件（笔记）

    javascript 组成部分    1.ECMAScript        javascript的核心解释器 2.DOM        Document Object Modle         文 ...

  3. 使用KEIL C51实现的简单合作式多任务操作系统内核（单片机实现版本）

    基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...

  4. QT树莓派交叉编译开发环境搭建

    QT树莓派交叉编译开发环境搭建 - JerryZone <Cross-compiling Qt Embedded 5.5 for Raspberry Pi 2> <Qt for Em ...

  5. 78 Ranking SVM

    0 引言 Ranking-SVM是SVM的一个变种,通过将排序问题转化为二分类问题,并利用标签数据训练特征权重收敛得到特征模型,完成排序任务,是比较经典的机器学习排序算法. 1 中文版介绍 https ...

  6. Jetson Nano 系列教程2：串口调试接口登录Jetson Nano

    连接Jetson Nano可以有多种方法,这里我们一一介绍一下.开始本章节前,请先参考上一章,烧写好镜像 直接连接 所谓直接连接,就是将Jetson Nano当做主机,连接HDMI屏幕,连接键盘和鼠标 ...

  7. bzoj 3881 [Coci2015]Divljak——LCT维护parent树链并

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3881 对 S 建 SAM ,每个 T 会让 S 的 parent 树的链并答案+1:在 T ...

  8. ShopNC多用户商城标题去版权 后台去版权方法2.0版本

    一.前台标题: \framework\tpl\nc.php 第85行 $output['html_title'] = ( $output['html_title'] != "" ? ...

  9. SAS创建和使用索引（SAS INDEX)

    一.概述 在合并数据集的时候,可以使用DATA步,但使用DATA 步时需要对KEY VALUE 排序,且KEY VALUE 的名字也必须一致:也可以用PROC SQL ,不需要进行上述排序.重命名的步 ...

  10. C++——class类和struct结构体的唯一区别

    唯一的区别:默认访问权限不同,其他没有任何区别. class Base{/****/}; class D1:Base{/****/};//默认D1对Base是public继承 struct D2:Ba ...