美文网首页Vue.js专区
vue 组件传值 props $emit $event

vue 组件传值 props $emit $event

作者: 出来混要还的 | 来源:发表于2019-08-29 17:12 被阅读0次

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

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

    相关文章

      网友评论

        本文标题:vue 组件传值 props $emit $event

        本文链接:https://www.haomeiwen.com/subject/ldaiectx.html