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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,118评论 0 25
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,907评论 1 32
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 7,730评论 1 17
  • 首先 vue 组件化的一个框架。既然是组件化。那么一定存在组件和组件之间传值的问题 在讨论组件和组件怎么传值的问题...
    人话博客阅读 4,969评论 0 50
  • 2018年7月9日 星期一 阵雨 今天做了十个小时左右的车,晚上七点前,终于到家了,哪里好也不如自己的家...
    秋日私语666阅读 1,270评论 0 0

友情链接更多精彩内容