1.父向子传值
- 在父组件的data中定义要穿给子的属性
export default {
data(){
return {
selectType:'radio'
}
}
}
- 父组件html调用子组件时绑定数据
<j-select-user-by-dep :selectType="selectType"></j-select-user-by-dep>
- 子组件通过props获取属性
推荐写法
export default {
props:{
selectType :{
type:String, // 数据类型
default: 'checkbox',// 默认值
required: false//是否必须
}
}
....
}
另外一种写法
export default {
props:['selectType']
....
}
说明selectType为父调用组件绑定数据时，绑定属性的名称
2. 子向父组件传值
- 子组件使用$emit注册事件
this.$emit("changeName","修改父name值")；
- 父组件调用子组件时绑定事件，并用$event 获取参数
<j-select-user-by-dep @changeName="changeName($event)"></j-select-user-by-dep>
注意：参数名称必须为$event
- 父组件事件事件
export default {
....
methods:{
changeName:function(name){
this.name= name;
}
}
....
}
说明：子向父组件传值本质上为子调用父组件的函数，函数中获取子组件传入的值
3.传值注意事项
传值根据值的类型分为传值（非对象类型）和传引用（对象），传引用时，传的值在任意位置修改时，所有和当前对象绑定的内容均会发生变化。
