Vue props用法详解
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值,可参考官网https://cn.vuejs.org/v2/guide/components-props.html
·
父子组件
比如我们需要创建两个组件 Test(父组件) 和 Cmpone(子组件),现在我们要实现从Test组件向Cmpone组件传递数据。父组件向子组件传递数据分为两种方式:动态和静态
静态props
子组件要显示的用 props 声明它期望获得的数据
- Test组件
<template>
<div class="Test">
<cmpone forChildMsg="字符串随便写"></cmpone>
</div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
name: 'Test',
components:{
Cmpone,
}
}
</script>
<style scoped>
</style>
- Cmpone组件
<template>
<div class="cmpone">
<div>{{forChildMsg}}</div>
</div>
</template>
<script>
export default {
name: 'Cmpone',
components:{
},
props: ["forChildMsg"]
}
</script>
<style scoped>
</style>
-
动态props
在模板中,要动态地绑定父组件的数据到子组件模板的 props,和绑定 Html 标签特性一样,使用v-bind绑定;
基于上述静态 props 的代码,这次只需要改动父组件
Test组件
<template>
<div class="Test">
<cmpone :forChildMsg="forChildMsg"></cmpone>
</div>
</template>
<script>
import Cmpone from './Cmpone'
export default {
name: 'Test',
components:{
Cmpone,
},
data(){
return{
forChildMsg:'父组件向子组件传递数据'
}
}
}
</script>
<style scoped>
</style>
Cmpone组件
<template>
<div class="cmpone">
<div>{{forChildMsg}}</div>
</div>
</template>
<script>
export default {
name: 'Cmpone',
components:{
},
props: ["forChildMsg"]
}
props验证
我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组
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
}
}
}
props驼峰标识
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
重申一次,如果你使用字符串模板,那么这个限制就不存在了。
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
<blog-post :post-title="message"></blog-post>
更多推荐
所有评论(0)