父元件修改子元件的值

之前對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才能讓父元件操作資料。