vue实现回调

Vue 实现回调的方法

在 Vue 中实现回调功能可以通过多种方式，以下是一些常见的方法：

使用 props 传递回调函数

父组件通过 props 将回调函数传递给子组件，子组件在适当的时机调用该函数。

父组件代码：

<template>
  <ChildComponent :callback="handleCallback" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCallback(data) {
      console.log('回调数据:', data)
    }
  }
}
</script>

子组件代码：

<template>
  <button @click="triggerCallback">触发回调</button>
</template>

<script>
export default {
  props: {
    callback: {
      type: Function,
      required: true
    }
  },
  methods: {
    triggerCallback() {
      this.callback('来自子组件的数据')
    }
  }
}
</script>

使用 $emit 自定义事件

子组件通过 $emit 触发事件，父组件监听该事件并执行回调逻辑。

子组件代码：

<template>
  <button @click="emitEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', '事件数据')
    }
  }
}
</script>

父组件代码：

<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log('接收到事件数据:', data)
    }
  }
}
</script>

使用 provide/inject

在祖先组件中提供回调函数，后代组件通过注入使用。

祖先组件代码：

<script>
export default {
  provide() {
    return {
      sharedCallback: this.sharedMethod
    }
  },
  methods: {
    sharedMethod(data) {
      console.log('共享回调:', data)
    }
  }
}
</script>

后代组件代码：

<script>
export default {
  inject: ['sharedCallback'],
  methods: {
    callSharedMethod() {
      this.sharedCallback('注入的数据')
    }
  }
}
</script>

使用 Vuex 状态管理

通过 Vuex 的 actions 实现跨组件回调逻辑。

store 代码：

const store = new Vuex.Store({
  actions: {
    globalCallback(context, payload) {
      console.log('全局回调:', payload)
    }
  }
})

组件代码：

<script>
export default {
  methods: {
    triggerGlobalCallback() {
      this.$store.dispatch('globalCallback', '全局数据')
    }
  }
}
</script>

使用事件总线

创建全局事件总线实现跨组件回调。

事件总线代码：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送组件代码：

<script>
import { EventBus } from './eventBus'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-event', '总线消息')
    }
  }
}
</script>

接收组件代码：

<script>
import { EventBus } from './eventBus'

export default {
  created() {
    EventBus.$on('message-event', this.handleMessage)
  },
  methods: {
    handleMessage(message) {
      console.log('收到消息:', message)
    }
  },
  beforeDestroy() {
    EventBus.$off('message-event', this.handleMessage)
  }
}
</script>

每种方法适用于不同的场景，props/emit 适合父子组件通信，provide/inject 适合深层嵌套组件，Vuex 适合大型应用状态管理，事件总线适合简单跨组件通信。根据具体需求选择最合适的方法。