vue中的prop
propprop一般用于父组件向子组件进行单向通信(父向子传值),传递的可以是一个对象,也可以是一个数组。prop是数组的话会有默认的数据类型,是对象的话可以设置数据类型,是否必传等prop 是在父传子时形成一个单向下行绑定,意思是父级的更新会向下流动到子组件中,但是反过来则不行。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop
·
prop
prop一般用于父组件向子组件进行单向通信(父向子传值),传递的可以是一个对象,也可以是一个数组。
prop是数组的话会有默认的数据类型,
是对象的话可以设置数据类型,是否必传等
prop 是在父传子时形成一个单向下行绑定,意思是父级的更新会向下流动到子组件中,但是反过来则不行。
每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
props验证
<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
props: {
// 基础的类型检查 (`null` 匹配任何类型)
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
}
}
},
data() {
return {
}
},
template: `
<div>
{{propD}}{{propE}}
</div>
`
})
更多推荐
已为社区贡献1条内容
所有评论(0)