美文网首页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.传值注意事项

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

相关文章

  • 面试题.sync修饰符

    vue规则:组件不能修改props拿外部数据this.$emit可以触发事件,并传参$event可以获取$emit...

  • vue 组件传值 props $emit $event

    1.父向子传值 在父组件的data中定义要穿给子的属性 父组件html调用子组件时绑定数据 子组件通过props获...

  • Vue 组件通信

    父组件通过 props 给子组件传值 子组件通过 vm.$emit(event, arg) 触发父组件事件 其他组...

  • vue组件通信

    通常父子组件通信都是用props和$emit进行传递,父组件通过props传值给子组件,子组件通过$emit传值给...

  • vue--三种组件中之间的传值

    一、父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit 1...

  • 理解.sync 的用法

    Vue 中规定: 组件不能修改 props 外部数据 $emit可以触发发事件,并传参 $event可以获取$em...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值:可以使用$emit/props...

  • mpVue记录3——父子组件传值/插槽

    vue父子组件传值过程:子组件:props接收,data里同步数据父组件:在子组件通过$emit()发送,父组件定...

  • vue组件间传值之eventBus

    1 概述: vue组件间的传值,父子之间props 和emit; 跨组件间可以使用vuex或者eventBus; ...

  • vue组件通讯----event-bus

    vue组件之间通讯,通过props和@event($emit('event'))的方式传递数据和改变数据,存在诸多...

网友评论

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

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