父组件修改子组件的值

之前对emit这个东西不怎么熟悉,最近两天用到了好几次,所以就想把它记录一下。

父组件修改子组件的默认值

子组件:

  props: {
    limitNum: {
      default: 3
    }
  },
  methods:{
   emitLimitNum(){
      this.$emit("limitNum");
    },
  }

父组件:(upload-img是子组件的名称)

 <upload-img ref="uploadImageChild"
     limitNum="6"
        @fileSelect="handleFileSelect"
        @fileRemove="handleFileRemove"></upload-img>

父组件调用的是一个事件

子组件:(这里对class为header-rigth注册了点击事件)

<template>
  <div class="header">
    <div class="header-left"
         @click="$router.go(-1)">
      <i class="iconfont icon-zuojiantou"></i>
    </div>
    <div class="header-in">{{title}}</div>
    <div class="header-rigth" @click="emitfn">
      <a>{{btnText}}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderFour",
  props: [
    "title",
    "btnText"
  ],
  methods:{
      emitfn(){
          this.$emit("publish");
      }
  }

}
</script>


父组件:

<Order-Header title="评价" btnText="发布" @publish="submit"></Order-Header>

这时点击发布按钮就会触发子组件的点击事件,用一般的click是调用不到的,只有$emit才能让父组件操作数据。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值