Vue组件中参数校验与非props特性的示例分析-创新互联-成都快上网建站

Vue组件中参数校验与非props特性的示例分析-创新互联

这篇文章主要为大家展示了“Vue组件中参数校验与非props特性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue组件中参数校验与非props特性的示例分析”这篇文章吧。

成都创新互联公司是一家集网站建设,荣成企业网站建设,荣成品牌网站建设,网站定制,荣成网站建设报价,网络营销,网络优化,荣成网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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

props:['count']

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

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

props:{
count:String
}

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

组件的参数校验

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


  
Vue.component('child',{   props: ['content'],   template: '
{{content}}
' }) let vm = new Vue({   el: '#root', })

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


  
Vue.component('child',{   props: {     content: String     //子组件接收到的 content 这个属性,必须是一个字符串类型的   },   template: '
{{content}}
' }) 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里面的内容了。

Vue组件中参数校验与非props特性的示例分析

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

props特点:

  • props特性在子组件里面,没办法获取到你父组件传递的内容,因为你压根没声明你要获取的内容,也就没法用。

  • 如果我们用的是非props特性,那么这个特性是会显示在dom标签上的

Vue组件中参数校验与非props特性的示例分析

以上是“Vue组件中参数校验与非props特性的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章名称:Vue组件中参数校验与非props特性的示例分析-创新互联
本文地址:http://kswjz.com/article/dcpopg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流