之前对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才能让父组件操作数据。