vue2 props_vue2props传参

vue官方文档：https://v2.cn.vuejs.org/v2/guide/components-props.html

vue父子组件之间的通信方法之一是通过在父组件使用v-bind下发数据，在子组件中使用props接受数据并通过自定义事件emit向父组件发送消息。

传入prop的几种方式

1. 传入静态数据

   <my-component title="My Title" ></my-component>
   // 直接传入会被解析为true
   <my-component disabled ></my-component>
   1
   2
   3

2. 传入动态数据

   // 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>
   1
   2
   3
   4
   5
   6

3. 批量传入数据

   如果想对象中的所有 property 作为 prop 传入,可以使用 v-bind 直接传入

   data:{
   	name:'jack',
   	age:18
   };
   <my-component v-bind="data" ></my-component>
   1
   2
   3
   4
   5

   等价于

   <my-component
   	v-bind:name="data.name"
       v-bind:age="data.age" 
   ></my-component>
   1
   2
   3
   4

单向数据流

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
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

prop 的几种使用方式

1. 简单声明

   props:['name','id','age'] // 推荐
   props:{
       name:{},
       id:{},
       age:{}
   }
   1
   2
   3
   4
   5
   6

2. 约束数据类型

   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
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

3. 默认值

   // 此时需要写成对象形式
   props:{
       // 基础数据类型的默认值
       propA:{
           type:String,
           default:'value'
       },
       propB:{
           type: Number,
           default: 100
       },
       // 默认值为对象或数组,即复杂数据类型
       // 需要通过一个函数返回
       propC:{
           type:Array,
           default:()=>{ return [] }
       },
       propD:{
           type:Object,
           default:()=>{ return {} }
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22

4. 是否必填

   // 通过 required:true 来配置
   // 如果没有传入必填的props,在开发环境中会报错
   props:{
       propA:{
           required:true
       }
   }
   1
   2
   3
   4
   5
   6
   7

5. 自定义校验

   // 通过 validator 配置
   // validator 必须返回一个检验是否通过的布尔值
   props:{
       propA:{
           validator: function (value) {
           // 这个值必须匹配下列字符串中的一个
           return ['success', 'warning', 'danger'].includes(value)
         }
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10