Prop验证、inheritAttrs、$attrs的用法和坑
2024-08-31 22:19:13
Prop
Prop验证
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
- prop 会在一个组件实例创建之前进行验证
非 Prop 的 Attribute
如果一个父组件向其子组件传递一个属性，但是子组件没有使用props接收它，那么这个属性就会被添加到子组件的根元素上去，即：在子组件使用
this.$attrs就能获取到传入的属性对应的值<div id="app">
<child-com :name='name' :age='age' :sex='sex'></child-com>
</div> <script>
const vm = new Vue({
el: '#app', // 父组件
data: {
name: 'lyl',
age: 20,
sex: '男'
},
components: {
childCom: { // 子组件
template: `
<div>
<span> {{name}} </span>
<grand-com v-bind='$attrs'></grand-com> <!-- 注意看这里,你会发现这里的 v-bind后面直接跟上的不是一个属性而是等号 -->
<!-- 这样一来我们就把 子组件中没有用到的属性（除class和style以外）全部传到了孙子组件 -->
</div>
`,
props: ['name'], // 这里没有将 age 和 sex 在 props 中接收
created() {
console.log(this.$attrs) // 控制台打印：{age:20,sex:男}
},
components: {
grandCom: { // 孙子组件
template: `
<div>
<span>{{$attrs.age}}</span>
<span>{{$attrs.sex}}</span>
</div>
`,
}
}
}
}
})
</script>
inheritAttrs属性的用法<div id="app">
<child-com :name='name' :age='age' :sex='sex'></child-com>
</div> <script>
const vm = new Vue({
el: '#app', // 父组件
data: {
name: 'lyl',
age: 20,
sex: '男'
},
components: {
childCom: { // 子组件
template: `
<div>
<span> {{name}} </span>
</div>
`,
props: ['name'], // 这里没有将 age 和 sex 在 props 中接收
created() {
console.log(this.$attrs) // 控制台打印：{age:20,sex:男}
}
}
}
})
</script>
你就会发现，这里的div标签上面被绑定了age、sex这样的属性，这就是官方文档说的非Prop的属性会被添加被绑定组件的根元素上 ，就如上图所示，但是往往你是不想这样做的，那么就可以使用
inheritAttrs属性了用法：在子组件的模板对象中添加
inheritAttrs: false即可让这种情况禁止掉<div id="app">
<child-com :name='name' :age='age' :sex='sex'></child-com>
</div> <script>
const vm = new Vue({
el: '#app', // 父组件
data: {
name: 'lyl',
age: 20,
sex: '男'
},
components: {
childCom: { // 子组件
inheritAttrs: false, // 父组件传入的name、age、sex属性中除子组件props接收的属性name外，其他属性默认会被浏览器渲染成html属性，但是设置该属性之后则不会被浏览器这样渲染
template: `
<div>
<span> {{name}} </span>
</div>
`,
props: ['name'], // 这里没有将 age 和 sex 在 props 中接收
created() {
console.log(this.$attrs) // 控制台打印：{age:20,sex:男}
}
}
}
})
</script>
最新文章
- python 单步调试初探(未完待续)
- iOS CADisplayLink 定时器的使用
- 阿里巴巴、美团等各大互联网公司的 Java类 校招对本科生有什么要求？
- ion-header-bar
- 关于RichTextField2.0表情显示错乱的问题！
- nancy中的诊断功能面板1
- swift闭包传值
- 【python之旅】python的面向对象
- bzoj2096
- 计算机学院大学生程序设计竞赛（2015’12） 1004 Happy Value
- Calendar使用方法
- Swift中enum, struct, class的有关使用方法
- Vertical viewport was given unbounded height
- MySQL 基础十一 事件
- Java 泛型 1例
- P2731 骑马修栅栏 Riding the Fences
- T550 HiDPI Ubuntu 16.04安装流水帐
- Android组件系列----Activity的生命周期
- 费了个劲的git
- [吴恩达机器学习笔记]12支持向量机6SVM总结