emit的用法

Question

老师你好，关于emit的用法逻辑我还是不太理解
context.emit向父组件抛出事件：

  setup(props, context) {
    const buttonClick = () => {
      context.emit('close-modal')
    }
    return { buttonClick }
  }
})

那么父组件里为什么这么写：

<modal :isOpen="modalIsOpen" @close-modal="onModalClose">My Modal!!!</modal>

这其中的逻辑是什么？
点击子组件中的按钮，触发buttonClick事件，然后向父组件抛出close-modal事件？在父组件中，onModalClose事件就相当于close-modal？
我有些混乱，麻烦老师解答下

Answer 1

张轩 2023-01-03 09:57:33

同学你好

事件对于一个组件是有重要的东西，因为有了事件父组件就可以特定的时刻完成特定的操作。

回到这段代码：

<modal :isOpen="modalIsOpen" @close-modal="onModalClose">My Modal!!!</modal>
@close-modal 是事件名称，和
context.emit('close-modal') 这个是一致的。

onModalClose 是事件的回调，是父组件中定义的一个函数。这个函数执行的时候事件被触发。

• 提问者 Hania冲鸭 #1

  老师，这里我理解的是点击close按钮，触发buttonClick事件，然后向父组件抛出close-modal事件，父组件接收到子组件抛出的close-modal事件，然后去 调用onModalClose函数，是这样吗？

• 张轩 回复 提问者 Hania冲鸭 #2

  同学你好 你的理解是正确的