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特性的特点是，如下图：
我们在子组件里有一个content的内容传递，这个属性的内容传递是不会在dom标签上进行显示的。
当你父组件传递了content，你子组件接收了这个content，你在模版里就可以直接通过插值表达式或者通过this.content，去取得content里面的内容了。
非props特性：父组件向子组件传递了一个属性，但是子组件并没有props这块的内容，也就是说子组件并没有声明我要接收父组件的传递过来的内容
非props特点：
以上是“Vue组件中参数校验与非props特性的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
名称栏目：Vue组件中参数校验与非props特性的示例分析-创新互联
标题来源：
http://cxhlcq.com/article/dcpopg.html
重庆分公司
重庆分公司
