prop
- 是组件之间的通信方式,prop属性是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件
- props可以通过数组指定需要哪些属性。但在vue.js内部,数组格式的props会被格式化成为对象格式
- HTML特性是不区分大小写。所以会使用camelize函数将props名称驼峰化,即将a-b这样的名称转换成aB
父组件中
<child user-name="berwim"></child>
子组件中props选项中需要使用userName
props:['userName']
prop定义的数据类型
- 字符串类型
- 数组类型
- 布尔类型
- 函数类型
props: {
//基础的类型函数
propA:Number,
//可能是一个数组,提供多个可能的类型:
propB:[String,number],
//对象类型,笔传且是字符串类型
propC:{
type:String,
required:true
},
//数值存在默认值
propD:{
type:Number,
default:100
},
//数组/对象的默认值应当由一个工厂函数返回
propE:{
type: Object,
default: function () {
return { message: 'hello' }
}
},
propF:{
type: Array,//数组类型
default: () =>[]
},
propG: {
validator: function(value) { //验证函数
// 这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].includes(value);
}
},
propH: { //Boolean类型
type: Boolean,
default: false
},
},
动态绑定
-
使用v-bind动态地将props绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件
-
如果把一个对象的所有属性作为prop进行传递,可以使用不带任何参数的v-bind
todo: {
text: 'Learn Vue',
isComplete: false
}
---------------------绑定------------------
<todo-item v-bind="todo"></todo-item>
--------------------等价于-----------------
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>
单向数据流
- 每次父组件更新时,子组件的所有prop都会更新为最新值。如果想在子组件内部改变prop
- prop作为初始值传入后,子组件像把它当作局部组件数据来用
- prop作为原始数据传入,由子组件处理成其他数据输出
-----------在子组件内:
-----------1.定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'],
data: function () { //将initialCounter复制给当前组件的局部变量counter
return { counter: this.initialCounter }
}
-----------2.定义一个计算属性,处理 prop 的值并返回:
props: ['size'],
computed: {
normalizedSize: function () { //将size处理最后返回normalizedSize
return this.size.trim().toLowerCase()
}
}
参考文档:Prop传递数据 - 简书