VueJs组件prop验证简单介绍

组件

Vue.js引入的组件，让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用，或者使用原生元素但是以is特性做扩展。

今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，写了个小例子。

<div id="app">
  <my-child
   :num="100"
   :msg="'sdf'"
   :object="{a:'a'}"
   :cust="100"
  ></child>
 </div>
 <script type="text/javascript">
  Vue.component('my-child', {
   props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    num: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    msg: {
     type: String,
     required: true
    },
    // 数字，有默认值
    num1: {
     type: Number,
     default: 1000
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    object: {
     type: Object,
     default: function () {
     return { message: 'hello' }
     }
    },
    // 自定义验证函数
    cust: {
     validator: function (value) {
     return value > 10
     }
    }
   },
   template: `<div>
       <p>{{ num }}</p>
       <p>{{ msg }}</p>
       <p>{{ num1 }}</p>
       <p>{{ object }}</p>
       <p>{{ cust }}</p>
      </div>`
  })
  new Vue({
   el: "#app"
  });
 </script>

输出结果

这里都是通过验证了的，能够全部输出来，而且控制台没有报错。
如果有不符合的，控制台会报错。

<div id="app">
  <my-child
   :num="asd"
   :msg="sdf"
   :object="{a:'a'}"
   :cust="100"
  ></child>
 </div>

对应的，也没有渲染出来

但是也有一些是报错了但是渲染出来的。比如

<div id="app">
  <my-child
   :num="100"
   :msg="'sdf'"
   :object="{a:'a'}"
   :cust="1"
  ></child>
 </div>

所以，这个验证功能多的还是用作于开发，或者说写的组件让别的开发者使用是做的认证。（完全初学不太懂，如果有什么写错或者说这个验证还有什么功能，请在评论写下，先谢谢你了）

总结

以上所述是小编给大家介绍的VueJs组件prop验证简单理解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • VueJS组件之间通过props交互及验证的方式

    VueJS组件之间通过props交互及验证的方式

    props 是父组件用来传递数据的一个自定义属性.父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop". 父组件通过props将数据传递给子组件 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

  • Vuejs 组件——props数据传递的实例代码

    本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <scr

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • VueJs组件prop验证简单介绍

    组件 Vue.js引入的组件,让分解单一HTML到独立组件成为可能.组件可以自定义元素形式使用,或者使用原生元素但是以is特性做扩展. 今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子. <div id="app"> <my-child :num="100" :msg="'sdf'" :object="{a:'a'}" :cust="100&qu

  • 关于用ADO STREAM做的无组件上传程序简单介绍

    前面有人贴了用ADO STREAM做的无组件上传程序,今天我做一下关于它的简单介绍 以前,如果要用ASP操作文件,比如移动.复制.删除或者创建一个记事本文件,基本上都是通过FILESYSTEMOBJECT对象做的,当然,这个东西很专业,也没说什么不好,它可以提供完善的文件信息,比如建立时间,大小,上次修改时间等等,但是如果你不做痛苦的高代价的字符格式转换的话,利用它你无法直接操作二进制文件. 但是,现在我们介绍的stream物件可以同时操作文本对象和二进制对象,要求是您的机器上要安装有ADO2.

  • Apache shiro的简单介绍与使用教程(与spring整合使用）

    Apache shiro的简单介绍与使用教程(与spring整合使用）

    apache shiro框架简介 Apache Shiro是一个强大而灵活的开源安全框架,它能够干净利落地处理身份认证,授权,企业会话管理和加密.现在,使用Apache Shiro的人越来越多,因为它相当简单,相比比Spring Security,Shiro可能没有Spring Security那么多强大的功能,但是在实际工作时可能并不需要那么复杂的东西,所以使用简单的Shiro就足够了. 以下是你可以用 Apache Shiro所做的事情: Shiro的4大核心部分--身份验证,授权,会话管理

  • VueJs组件之父子通讯的方式

    组件(父子通讯) 一.概括 在一个组件内定义另一个组件,称之为父子组件. 但是要注意的是:1.子组件只能在父组件内部使用(写在父组件tempalte中); 2.默认情况下,子组件无法访问父组件上的数据,每个组件实例的作用域是独立的: 那如何完成父子如何完成通讯,简单一句话:props down, events up :父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送 父传子:Props 子传父:子:$emit(eventName) 父$on(eventName

  • Vuejs第八篇之Vuejs组件的定义实例解析

    本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件的定义 ①组件的作用: [1]扩展HT

  • Spring框架七大模块简单介绍

    Spring框架七大模块简单介绍

    Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring框架的7个模块 组成 Spring框架的每个模块(或组件)都可以单独存在,或者与其他一个或多个模块联合实现.每个模块的功能如下: 1核心模块 SpringCore模块是Spring的核心容器,它实现了IOC模式,提供了Spring框架的基础功能.此模块中包含的BeanFactory类是Spring的

  • VueJS 组件参数名命名与组件属性转化问题

    HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) 如果你使用字符串模版,则没有这些限制. <!-- kebab-

  • Spring的注解简单介绍

    SpringMVC的核心组件 DispatcherServlet-–>控制器,请求入口 HanderMapping--->控制器,请求派发 Controller---->控制器,请求处理流程 ModelAndView---->模型,封装业务处理结果和视图 ViewResolver---->视图,视图显示处理器 处理流程 浏览器向Spting发出请求,请求交给前端控制器DispatcherServlet处理. 控制器通过HanderMapping找到相应的Controller组

  • 使用Vue组件实现一个简单弹窗效果

    最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件. 本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式, props . $emit 传参,具体组件代码也传上去了.如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获. 组件最后实现的效果 实现步骤 先搭建组件的html和css样式,遮罩层和内

  • element中form组件prop嵌套属性的问题解决

    element中form组件prop嵌套属性的问题解决

    目录 Introduction 总结 Introduction 分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性 <template> <div id="app"> <el-form label-width="100px" :model="ruleForm" :rules="rules"> <el-form-item v-for

随机推荐