vue中组件的数据传递

1.props 父传子

传递方式：父组件引入及使用子组件时，在组件标签上使用数据绑定方式传递数据

例：<people :name='name' :age='age' :desc='desc'></people>

接收方式：

props:{
desc:{
type:String, //参数类型
required:true, //是否未必传参数
default:'lovely'
},
name:{
type:String,
default:'xiaomei' //默认值，没传就用此值
},
age:{
type:Number,
validator(value){
//属性校验，如果约束和属性校验出现和配置不一样的情况就会有报错提示
return value >= 0
}
},
arr:{
type:Array,
default:() => [1,2,3] //数组或对象默认值需要用函数设置
}
}

2.子组件绑定一个事件，通过 this.$emit() 来触发

（1）在子组件中绑定一个事件，并给这个事件定义一个函数

// 子组件
<button @click="changeParentName">改变父组件的name</button>
​
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注：此处事件名称与父组件中绑定的事件名称要一致
}
}
}

（2）在父组件中定义并绑定 handleChange 事件

// 父组件
<child @handleChange="changeName"></child>
​
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}