props特性的深入了解
Prop命名风格
（1）Prop 的命名风格
①PascalCase首字母大写命名即大驼峰法
②camelCase 小驼峰命名法
③kebab-case 短横线分隔命名法
注意：
HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
<!-- html代码 -->
<div id="demo">
<my-age :my-age="20"></my-age>//短横线命名法
</div>
// vue代码
Vue.component('my-age',{
props:['myAge'],//小驼峰命名法
template:`
<div>
<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
</div>
`
})
var demo=new Vue({
el:"#demo",
})
Prop 动态和静态
（1）静态Prop
<!-- html代码 -->
<div id="demo">
<my-age my-age="20"></my-age>//短横线命名法
</div>
// vue代码
Vue.component('my-age',{
props:['myAge'],//小驼峰命名法
template:`
<div>
<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
</div>
`
})
var demo=new Vue({
el:"#demo",
})
打印结果是我的虚岁是201
（2）动态Prop
prop 可以通过 v-bind 动态赋值，对上述案例稍作修改
<!-- html代码 -->
<div id="demo">
<my-age :my-age="20"></my-age>//短横线命名法
</div>
// vue代码
Vue.component('my-age',{
props:['myAge'],//小驼峰命名法
template:`
<div>
<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
</div>
`
})
var demo=new Vue({
el:"#demo",
})
答应结果是我的虚岁是21
props传值格式
props传值格式：props传值时，如果属性添加了:则会将后面的属性值理解为表单式，否则将会理解为字符串
具体详情看上文代码
组件参数props校验
组件参数校验：
父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。
1.字符串数组格式传值代码如下
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:['blogContent',"blogTitle"],
template:`
<div>
<h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:"西游记"
}
})
2.props对象键值对格式传值代码如下，
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:{
'blogContent':String,
"blogTitle":String
},
template:`
<div>
<h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:"西游记"
}
})
注意如果把标题的值改为666可以正常显示，但vue有一个报错，此时只要把上班的string改为number即可
3.多类型数据验证
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:{
'blogContent':String,
"blogTitle":[String,Number]
},
template:`
<div>
<h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:"西游记"
}
})
注意：在原本的数据类型上写过个类型，满足其中一个即
4.必填项认证
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:{
'blogContent':String,
"blogTitle":{
type:String,
required:true
}
},
template:`
<div>
// <h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:'西游记'
}
})
注意： required:true是必填项，否则会报错，如果改为fasle就不会报错了，
5.默认项
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" ></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:{
'blogContent':String,
"blogTitle":{
type:String,
default:"默认项"
}
},
template:`
<div>
// <h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:'西游记'
}
})
注意：如果不传值也不会报错 ，会默认的传入默认项三个大字
6.复杂验证(自定义校验)：
除了上述校验外，还可以定义更复杂的校验，使用validator(校验器)可以实现自定义校验。
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue":blog-title="titleValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog',{
props:{
'blogContent':String,
"blogTitle":{
type:String,
validator(value){
// console.log(value)此时答应出来的value是他的值
if (value.length>10&&value.length<20) {
alert("成功")
return true
} else{
alert("不成功")
return false
}
}
}
},
template:`
<div>
// <h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
</div>`
})
var demo=new Vue({
el:"#demo",
data:{
contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
titleValue:'西游记和水浒转都是四大名著之一'
}
})
注意：validator的语法是跟一个函数写在props里是一个方法可以省略function和冒号，所判断的值一定要return回去 要不到页面上会一直在弹框，用户体验度绝对极差
小小总结一下：
组件参数校验简介：
组件参数校验即子组件接收父组件传递参数时，执行数据校验
分类类型：
①基础数据类型type校验
②多条件数据类型type校验{[]}
③必填项required校验
④默认值default校验
⑤自定义校验器validator校验
非props特性与props特性
props特性：父组件传递属性时，子组件的props里声明了对父组件所传属性的接收，即子组件通过props接收父组件所传属性。
非props特性：父组件传递属性时，子组件的props里没有声明对父组件所传属性的接收，即子组件没有通过props接收父组件所传属性。
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue" :money=moneyValue></my-blog>
</div>
// vue代码
Vue.component('my-blog', {
props: {
'blogContent': String,
"blogTitle": {
type: String,
}
},
template:`
<div>
<h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
<p>价格{{moneyValue}}</p>
</div>`
})
var demo = new Vue({
el: "#demo",
data: {
contentValue: "大闹天宫、三打白骨精、三借芭蕉扇",
titleValue: '西游记和水浒转都是四大名著之一',
moneyValue: 600
}
})
注意：非props特性父组件传值子组件没有接受这就是非props特性，他的值是没有传进去的在模板的根元素上显示
<!-- html代码 -->
<div id="demo">
<my-blog :blog-content="contentValue" :blog-title="titleValue" :author="authorValue"></my-blog>
</div>
// vue代码
Vue.component('my-blog', {
props: {
'blogContent': String,
'blogTitle': String,
'author':String
},
template:`
<div>
<h1>{{blogTitle}}</h1>
<p>{{blogContent}}</p>
<p>{{author}}</p>
</div>`
})
var demo = new Vue({
el: "#demo",
data: {
contentValue: "大闹天宫、三打白骨精、三借芭蕉扇",
titleValue: '西游记和水浒转都是四大名著之一',
authorValue:"吴承恩"
}
})
注意：props特性 父组件传了子组件接受了这就是props特性
$attrs和inheritAttrs属性
vue中默认情况下，调用组件时，如果传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（class和style例外），而这些“非法”的属性会记录在$attrs属性上。inheritAttrs继承属性
如何控制不把这些非法的属性渲染在组件的根元素上呢？
答案是在组件内部设置inheritAttrs:false即可。
attrs"可以把“非法”的属性渲染到指定的组件某个元素上
有问题可以随时联系小编
上一篇： Python编程实现简单的微博自动点赞