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方法，这样就实现了子组件向父组件的传递