vue $emit的使用

https://blog.csdn.net/sllailcp/article/details/78595077

使用emit一般是我們寫了一個子組件，可以復用在多個父組件之中。 子組件顯示的值需要父組件給傳遞或者子組件自身的值更新了需要和父組件同步，那么如何完成他們倆之間的交互呢？ 那就要用到 $emit 這個新奇的東西

 

父組件：

<TopButtonGroup :is-editing="isEditing" @submit-info="submitBasicInfo" @edit-info="editInfo" @cancel-edit="cancelEdit"></TopButtonGroup>

cancelEdit () {
   this.isEditing = false
}

子組件

<template>
  <div v-has="UPDATE" class="buttons-box">
    <div v-if="isEditing">
      <el-button size="medium" @click="cancelEdit">取消</el-button>
      <el-button type="primary" @click="submitInfo" size="medium">保存並通知</el-button>
    </div>
    <div v-else>
      <el-button type="primary" size="medium" @click="editBasicInfo">編輯</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'topButtonGroup'，

props: {
  isEditing: {
    type: Boolean,
    default: false
  }
}

methods: {
  editBasicInfo () {
    this.$emit('edit-info')
  },
  cancelEdit () {
    this.$emit('cancel-edit')
  },
  submitInfo () {
    this.$emit('submit-info')
  }
}

} </script>

 

我們的子組件要顯示在父組件之中，但是是要顯示 v-if 中的內容還是 v-else 中的內容呢？一切全看 isEditing ，而 isEditing 的值肯定是父組件通知到子組件的呀，那么是怎么通知過來的呢？

父組件可以使用 props 把數據傳給子組件

1. 在子組件中，我們肯定需要有一個地方聲明出來：你的isEditing一定要聽父組件的 ； 那么如何聲明呢？

在子組件中加 props 

props: {
  isEditing: {
    type: Boolean,
    default: false
  }
}
也可以寫成

props: ['isEditing']

這樣表示說 isEditing 參數聽父組件的。

2. 同時我們還得告訴父組件，你得把這個值告訴子組件，便是通過  :is-editing="isEditing"  來傳遞的， 也可以寫成  :isEditing="isEditing"

 

那么要是子組件中某個值變化了需要父組件來更新顯示的值，子組件又是如何把消息放出去的呢？

子組件可以使用 $emit 觸發父組件的自定義事件

我們拿子組件中的 cancelEdit 方法舉例。 cancelEdit被觸發（即取消按鈕被點擊），那么isEditing就應該恢復成false。 

我們在父組件中寫好了 cancelEdit 方法，希望點擊取消的時候會觸發這個方法。(這個地方還可以加參數哦)

cancelEdit () {
    this.isEditing = false
}

首先，要解決的問題是：點取消的時候怎么告訴父組件啊？—— emit！

我們在子組件的cancelEdit方法中這樣寫：

cancelEdit () {
  this.$emit('cancel-edit')
}

意思就是：我們一點擊子組件的取消，他就會把這個消息通報給父組件說，我的 cancel-edit 點擊了，你是不是要做什么操作。

而在父組件中，我們先安排好了 @cancel-edit="cancelEdit" ， 表示這個時候我們該做的是調用cancelEdit方法，這樣就實現了子組件向父組件的傳遞