zoukankan      html  css  js  c++  java
  • vuejs组件参数校验

    父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验
    需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢
    <div id='root'>
      <child content='hello world'></child>
    </div>
    
    <script>
    Vue.component('child',{
      props:{
        content:String
      },
      template:'<div>{{content}}</div>'
    })
    var vm = new Vue({
      el:'#root'
    })
    </script>
    将接收的props定义称对象,并指定类型,不以数组的形式接收参数
    接收的数据是字符串类型 或者 数组类型,,都可以
    props:{
      content:[String, Number]
    }
    复杂的校验
    <div id='root'>
      <child content='hello world'></child>
    </div>
    
    <script>
    Vue.component('child',{
      props:{
        content:{
          type:String,//数据类型
          required:false,//是否是必传
          default:'default content',//如果没传值,默认值
          validator:function(val){//自定义校验器,数据必须>5
            return (val.length>5)
          }
        }
      },
      template:'<div>{{content}}</div>'
    })
    var vm = new Vue({
      el:'#root'
    })
    </script>



    props特性
    父组件向子组件传递参数,子组件恰好声明了这个参数,进行接收
    非props特性
    父组件向子组件传递参数,子组件没有props这块内容,所以就会报错,不去接收,就没法使用这个content
    第二个特点是,子组件没接收,对应的属性值会显示在标签中,props特性不会显示
  • 相关阅读:
    Linux下彻底卸载LibreOffice方法
    Docker查看关联容器的卷宗在本机的存储位置
    Ubuntu技巧之清理系统中无用的软件包
    进入一个docker容器
    Status Code:405 Method Not Allowed
    ubuntu安装docker
    今天犯的一个低级错误
    Eclipse中Ctrl+Shift+f快捷键无效的解决方式
    hdu 4742 Pinball Game 3D(三维LIS&amp;cdq分治&amp;BIT维护最值)
    linux下vi编辑文件
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9655015.html
Copyright © 2011-2022 走看看