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.字符串数组格式传值代码如