Vue 组件参数校验与非props特性的方法

子组件接收父组件的参数的时候，props注册接收的参数

props:['count']

子组件可以对接收的参数校验。

例如规定接收的count参数要求是String

props:{
count:String
}

如果count是别的类型就会报错

组件的参数校验

组件的参数校验指的是什么呢？你父组件向子组件传递的内容，子组件有权对这个内容进行一些约束，这个约束我们可以把它叫做参数的校验。

<div id="root">
  <child content="hello world"></child>
</div>
Vue.component('child',{
  props: ['content'],
  template: '<div>{{content}}</div>'
})
let vm = new Vue({
  el: '#root',
})

现在有这样一个需求，父组件调用子组件的时候，传递的这个content，我要做一些约束，要求它我传递过来的content必须是一个字符串，我们该怎么实现呢？

<div id="root">
  <child content="hello world"></child>
</div>
Vue.component('child',{
  props: {
    content: String     //子组件接收到的 content 这个属性，必须是一个字符串类型的
  },
  template: '<div>{{content}}</div>'
})
let vm = new Vue({
  el: '#root',
})

组件接收到的content这个属性，必须是一个字符串类型的，如果我需要的参数类型是字符串或者数组，又该怎么写呢？

props: {
  content: [ String, Number ]
},

content的类型，可以用数组来表示。

content其实还有更复杂的用法：

props: {
  content: {
    type: Sring,
    required: true,         //必传
    default: 'default value',    //默认显示，非必传会显示
    validator(value){       //检测 content 的长度，如果长度大于 5，正常显示，如果长度小于 5 则报错
      return (value.length > 5)
    }
  }
}

非props特性

说到非props特性，它一定和props特性相对应。

props特性：当你的父组件使用子组件的时候，通过属性向子组件传值的时候，恰好子组件里面声明了对父组件传递过来的属性的一个接收，也就是说父子组件有个对应关系，如果你这么写我们就把叫做props特性

props特性的特点是，如下图：

  1. 我们在子组件里有一个content的内容传递，这个属性的内容传递是不会在dom标签上进行显示的。
  2. 当你父组件传递了content，你子组件接收了这个content，你在模版里就可以直接通过插值表达式或者通过this.content，去取得content里面的内容了。

非props特性：父组件向子组件传递了一个属性，但是子组件并没有props这块的内容，也就是说子组件并没有声明我要接收父组件的传递过来的内容

非props特点：

  • 非props特性在子组件里面，没办法获取到你父组件传递的内容，因为你压根没声明你要获取的内容，也就没法用。
  • 如果我们用的是非props特性，那么这个特性是会显示在dom标签上的

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件开发props验证的实现

    使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div id="app"> <foo-component :

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

  • 从vue源码看props的用法

    前言 平时写vue的时候知道 props 有很多种用法,今天我们来看看vue内部是怎么处理 props 中那么多的用法的. vue提供的props的用法 1. 数组形式 props: ['name', 'value'] 2. 对象形式 对象形式内部也提供了三种写法: props: { // 基础的类型检查 name: String, // 多个可能的类型 value: [String, Number], // 对象形式 id: { type: Number, required: true } }

  • 简单理解vue中Props属性

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以

  • 解决vue props 拿不到值的问题

    方案一: 在子组件中设置v-if='flag',初始值false,在成功获取数据后设置为true // 子组件 <echarts :datas="conditionStatisticsData" v-if="flag"></echarts> // 成功获取数据后 flag设置成true homeResource.getConditionData().then((res) => { this.flag = true if (res.dat

  • Vue中props的使用详解

    props属性是父子组件之间的通信桥梁.何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件.我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父组件的数据传给子组件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props的测试</titl

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • Vue中的Props(不可变状态)

    Vue中的Props(不可变状态)

    组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.接下来通过本文给大家介绍Vue中Props,一起看看吧! 单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这样会防止从子组件意外改变父级组件的状态

  • Vue props 单向数据流的实现

    1.props通信 注意:DOM模板的驼峰命名props要转为短横分割命名. <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </head> <body> <div id="app"> <my-component m

  • 浅谈Vue初学之props的驼峰命名

    在vue的中文官网有这样的说明:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名. 重申一次,如果你使用字符串模板,那么这个限制就不存在了. 以以下代码为例: 1.当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式. 2.当组件中template及props等使用字符串模板

  • Vue Prop属性功能与用法实例详解

    本文实例讲述了Vue Prop属性功能与用法.分享给大家供大家参考,具体如下: 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: html: <div id="app-1"> <!-- HTML 中是 keb

随机推荐