vue 组件传值 props $emit $event

父向子传值

在父组件的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为父调用组件绑定数据时，绑定属性的名称

子向父组件传值

子组件使用$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;
      }
  }
  ....
}

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

传值注意事项

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