设有一个名为 MyButton.vue 的组件
如下所示: <template> <div> <button @click="$emit('my-event')">Click Me!</button> </div> </template> <script> export default { } </script>
您可以看到，有一个调用 $emit 的简单单击事件，$emit 是 Vue 中的一个内置方法
当然，如果您想要一个更具结构化的组件，您可以调用一个自定义方法，并在其中调用 $emit 方法，如下所示
<template> <div> <button @click="buttonClickHandler">Click Me!</button> </div> </template> <script> export default { methods: { buttonClickHandler() { this.$emit('my-event') } } } </script>
无论如何编写这个部分，它都会发出一个事件。
当您使用这个组件时，您可以通过 v-on: 或@(这两者完全相同)来捕获这个事件，并执行任何您想要的操作。例如，如果你想在你的 index.vue 中使用这个按钮
template> <div> <MyButton @my-event="myButtonEventHandler" /> </div> </template> <script> import MyButton from "~/components/MyButton"; export default { components: { MyButton }, methods: { myButtonEventHandler() { alert('I am here!') } } } </script>
当使用 $emit 方法时，如上所示，第一个参数是事件的名称，其余参数是传递给方法的参数。所以你也可以这样做:
<template> <div> <button @click="buttonClickHandler">Click Me!</button> </div> </template> <script> export default { methods: { buttonClickHandler() { this.$emit('my-event', 'Hello', 'World') } } } </script>
接受参数
<template> <div> <MyButton @my-event="myButtonEventHandler" /> </div> </template> <script> import MyButton from "~/components/MyButton"; export default { components: { MyButton }, methods: { myButtonEventHandler(x, y) { alert(x + ' ' + y) } } } </script>
组件嵌套
现在真正的问题来了！假设您有一个非常复杂的布局，包含数十个嵌套组件。你不能只是一个接一个地把它们传到上面和上面！(我的意思是，技术上来说你可以，但是我并不希望这样做!).在这里你可以使用 $root！把 $root 想象成所有东西的根(实际上是这样的)
在触发的事件改糙一下，放在$root上
<template> <div> <button @click="buttonClickHandler">Click Me!</button> </div> </template> <script> export default { methods: { buttonClickHandler() { this.$root.$emit('a-far-away-event', 'Adnan') } } } </script>
如果我们要捕捉$root事件，你应该在 $root 上使用 $on 方法，原理就是把事件注册到根节点上面
<template> <div> <MyButton /> </div> </template> <script> import MyButton from "~/components/MyButton"; export default { components: { MyButton }, mounted() { this.$root.$on('a-far-away-event', this.aFarAwayEventHandler) }, methods: { aFarAwayEventHandler() { alert('Hello ' + name) } } } </script>
其他方法传递
$attrs、$listeners、provide、inject
