vue $emit的使用

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

使用emit通常是咱們寫了一個子組件，能夠複用在多個父組件之中。子組件顯示的值須要父組件給傳遞或者子組件自身的值更新了須要和父組件同步，那麼如何完成他們倆之間的交互呢？那就要用到 $emit 這個新奇的東西spa

父組件：.net

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

cancelEdit () {
 this.isEditing = false
}

子組件code

<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 的值確定是父組件通知到子組件的呀，那麼是怎麼通知過來的呢？blog

父組件能夠使用 props 把數據傳給子組件

1. 在子組件中，咱們確定須要有一個地方聲明出來：你的isEditing必定要聽父組件的；那麼如何聲明呢？事件

在子組件中加 props ip

props: {
  isEditing: {
    type: Boolean,
    default: false
  }
}
也能夠寫成

props: ['isEditing']

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

2. 同時咱們還得告訴父組件，你得把這個值告訴子組件，即是經過 :is-editing="isEditing" 來傳遞的，也能夠寫成 :isEditing="isEditing"同步

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

子組件能夠使用 $emit 觸發父組件的自定義事件

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

咱們在父組件中寫好了 cancelEdit 方法，但願點擊取消的時候會觸發這個方法。(這個地方還能夠加參數哦)

cancelEdit () {
    this.isEditing = false
}

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

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

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

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

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