vue 组件传值 props $emit $event

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.传值注意事项

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值