vue 组件传值 props $emit $event

父向子传值

在父组件的data中定义要传给子的属性

1 export default {
2    data(){
3       return {
4          selectType:'radio'
5       }
6    }
7 }

 

父组件html调用子组件时绑定数据

<j-select-user-by-dep  :selectType="selectType"></j-select-user-by-dep>

 

子组件通过调用props获取属性(有俩种写法,推荐第一种)

 1 export default {
 2   props:{
 3       selectType :{
 4         type:String, // 数据类型
 5         default: 'checkbox',// 默认值
 6         required: false//是否必须
 7       }
 8     }
 9   ....
10 }
1 export default {
2   props:['selectType']
3   ....
4 }

说明selectType为父调用组件绑定数据时,绑定属性的名称

子向父组件传值

子组件使用$emit注册事件

 

1 this.$emit("changeName","修改父name值");

 

 

 

父组件调用子组件时绑定事件,并使用$event获取参数

 

1 <j-select-user-by-dep  @changeName="changeName($event)"></j-select-user-by-dep>

 

 

 

注意:参数名称必须为$event

父组件事件

1 export default {
2   ....
3   methods:{
4       changeName:function(name){
5          this.name= name;
6       }
7   }
8   ....
9 }

说明:子向父组件传值本质上为子调用父组件的函数,函数中获取子组件传入的值

传值注意事项

传值根据值的类型分为传值(非对象类型)和传引用(对象),传引用时,传的值在任意位置修改时,所有和当前对象绑定的内容均会发生变化。

 

posted @ 2020-10-16 15:08  俩只猫  阅读(868)  评论(0编辑  收藏  举报