vue dispatch

在 Vue.js 中，dispatch 是一个用于触发父级组件中的事件的方法。它通过 $parent 属性向父级组件发送事件，可以在父级组件中使用 $emit 方法来监听这些事件并做出相应的处理。

具体而言，dispatch 方法接收两个参数：第一个参数是要触发的事件名称，第二个参数是要传递给父级组件的数据。例如，以下代码将触发名为 "my-event" 的事件，并将 { message: 'Hello World!' } 作为参数传递给父级组件：

this.$parent.$emit('my-event', { message: 'Hello World!' })

在父级组件中，可以使用 v-on 指令来监听该事件，并在触发时执行相应的方法。例如，以下代码将在父级组件中监听名为 "my-event" 的事件，并在触发时执行 handleMyEvent 方法：

<template>
  <div>
    <child-component @my-event="handleMyEvent" />
  </div>
</template>

<script>
export default {
  methods: {
    handleMyEvent(payload) {
      console.log(payload.message) // 输出 "Hello World!"
    }
  }
}
</script>

需要注意的是，如果要向父级组件发送事件，子组件必须是直接被包含在父级组件中的，即不能跨越其他组件包含关系。此外，如果要在子组件中访问父级组件中定义的方法或属性，可以使用 $parent 属性来访问。