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