vue官方文档:https://v2.cn.vuejs.org/v2/guide/components-props.html
vue父子组件之间的通信方法之一是通过在父组件使用v-bind下发数据,在子组件中使用props接受数据并通过自定义事件emit向父组件发送消息。
传入prop的几种方式
-
传入静态数据
<my-component title="My Title" ></my-component> // 直接传入会被解析为true <my-component disabled ></my-component>
-
传入动态数据
// v-bind <my-component v-bind:id="data.id" ></my-component> // 省略v-bind <my-component :id="data.id" ></my-component> // 书写表达式 <my-component :name="data.firstname+'-'+data.name" ></my-component>
-
批量传入数据
如果想对象中的所有
property
作为prop
传入,可以使用v-bind
直接传入data:{ name:'jack', age:18 }; <my-component v-bind="data" ></my-component>
等价于
<my-component v-bind:name="data.name" v-bind:age="data.age" ></my-component>
单向数据流
props
所有接受的数据都 不应该 在子组件中被 改变
数组和对象可以修改并正常运行,但仍然不建议这么做
如果组件中需要对 prop 值进行额外处理
可以通过 computed
或 watch
进行处理
export default{
data(){
return {
fullname2:"",
}
},
props:["firstName","lastName"],
// 方式一 computed
computed:{
fullname1(){
return this.firstName + "-" + this.lastName
}
},
// 方式二 watch
watch:{
firstName(val){
this.fullname2 = val + "-" + this.lastName
}
}
}
prop 的几种使用方式
-
简单声明
props:['name','id','age'] // 推荐 props:{ name:{}, id:{}, age:{} }
-
约束数据类型
function User (id, nickName) { this.id = id this.nickName = nickName } props:{ // 简单数据类型 propA1:String, propA2:Number, // 通过type约束类型 propA3:{ type:Boolean }, // 多个可能的类型 propB: [String, Number], // 不常见的类型 propC:Date, propD:Function, // 构造函数 // 将会通过instanceof 来进行检查确认propE的值是否通过 new User 创建的 propE:User }
-
默认值
// 此时需要写成对象形式 props:{ // 基础数据类型的默认值 propA:{ type:String, default:'value' }, propB:{ type: Number, default: 100 }, // 默认值为对象或数组,即复杂数据类型 // 需要通过一个函数返回 propC:{ type:Array, default:()=>{ return [] } }, propD:{ type:Object, default:()=>{ return {} } } }
-
是否必填
// 通过 required:true 来配置 // 如果没有传入必填的props,在开发环境中会报错 props:{ propA:{ required:true } }
-
自定义校验
// 通过 validator 配置 // validator 必须返回一个检验是否通过的布尔值 props:{ propA:{ validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].includes(value) } } }