props定义要接收的组件属性列表
jquery里面有一个类似于 attr()的方法用于获取属性值——prop()
这样理解props就很简单了:子组件调用时绑定属性值 传值给 子组件
========================================================================
调用子组件时:-----------------------------------------父组件中
//属性值不是变量
<子组件名 title="这个title属性"></子组件名>
//属性值是变量(v-bind不支持驼峰命名,用小写+“-”分隔)
<子组件名 :my-title="myTitle"></子组件名>
props定义要接收的属性列表-----------------------------------------子组件中:
props:['title','myTitle']//这里的属性支持驼峰命名
********************************************************************prop验证
type类型:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
required:必填 default:设置默认值 validator:自定义验证函数
例子:
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'].includes(value)
}
}
}
********************************************************************子组件改变props定义的属性值
每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
将props定义的属性作为子组件本地数据使用的方法:
方法一:定义本地数据属性初始化
props:['title','myTitle'],
data: function () {
return {
subTitle: this.myTitle-----------------子组件中以后使用可以用subTitle
}
}
方法二:计算属性
props: ['title','myTitle'],
computed: {
subTitle: function () {
return this.myTitle.trim()
}
}
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。