emit传参,获取返回值

本文介绍了如何在Vue应用中,子组件通过事件总线调用主组件的方法,并接收返回的参数,展示了前后端交互的基本原理和实践技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我的需求,子应用调用主应用方法,主应用返回参数。

主应用:

methods:{
getToken(callback) {
    callback(this.$store.state.user.auth)
  },
},
mounted(){
 this.$bus.on('getToken', this.getToken)
}

子应用:

mounted(){
this.$qkBus.emit("getToken", (token) => {
   alert(token);
 });
}
Vue 中,`$emit` 是一个用于触发自定义事件的方法,常用于子组件向父组件传递数据。通过 `$emit`,可以传递任意类型的参数,包括字符串、数字、对象、数组等。以下是一些常见的使用场景和示例。 ### 子组件向父组件传参 子组件通过 `$emit` 触发事件,并将数据作为参数传递给父组件。 ```vue <!-- 子组件 Children.vue --> <template> <button @click="sendData">发送数据</button> </template> <script> export default { methods: { sendData() { this.$emit('receive-data', '来自子组件的消息'); } } }; </script> ``` 父组件监听该事件并接收参数: ```vue <!-- 父组件 Father.vue --> <template> <div> <children @receive-data="handleReceiveData" /> <p>接收到的数据:{{ receivedMessage }}</p> </div> </template> <script> import Children from './Children.vue'; export default { components: { Children }, data() { return { receivedMessage: '' }; }, methods: { handleReceiveData(message) { this.receivedMessage = message; } } }; </script> ``` ### 传递多个参数 `$emit` 可以传递多个参数,父组件的事件处理函数将按顺序接收这些参数。 ```vue <!-- 子组件 --> <script> export default { methods: { sendData() { this.$emit('multi-params', '参数1', '参数2', 123); } } }; </script> ``` 父组件接收多个参数: ```vue <!-- 父组件 --> <template> <div> <children @multi-params="handleMultiParams" /> <p>参数1:{{ param1 }}</p> <p>参数2:{{ param2 }}</p> <p>数值:{{ number }}</p> </div> </template> <script> import Children from './Children.vue'; export default { components: { Children }, data() { return { param1: '', param2: '', number: 0 }; }, methods: { handleMultiParams(param1, param2, number) { this.param1 = param1; this.param2 = param2; this.number = number; } } }; </script> ``` ### 使用 `$event` 接收单个参数 当父组件的方法需要接收子组件传递的参数以及额外的自定义参数时,可以使用 `$event` 来表示子组件传递的参数。 ```vue <!-- 子组件 --> <script> export default { methods: { sendData() { this.$emit('send-message', 'Hello from child'); } } }; </script> ``` 父组件中同时接收 `$event` 和自定义参数: ```vue <!-- 父组件 --> <template> <div> <children @send-message="handleMessage($event, '额外参数')" /> <p>消息:{{ message }}</p> <p>附加信息:{{ extraInfo }}</p> </div> </template> <script> import Children from './Children.vue'; export default { components: { Children }, data() { return { message: '', extraInfo: '' }; }, methods: { handleMessage(msg, extra) { this.message = msg; this.extraInfo = extra; } } }; </script> ``` ### 传递对象或数组 除了基本类型,`$emit` 还可以传递对象或数组。 ```vue <!-- 子组件 --> <script> export default { methods: { sendData() { const data = { name: 'Vue', version: '3.0', features: ['响应式', '组件化'] }; this.$emit('send-object', data); } } }; </script> ``` 父组件接收对象: ```vue <!-- 父组件 --> <template> <div> <children @send-object="handleObject" /> <p>名称:{{ obj.name }}</p> <p>版本:{{ obj.version }}</p> <ul> <li v-for="(feature, index) in obj.features" :key="index">{{ feature }}</li> </ul> </div> </template> <script> import Children from './Children.vue'; export default { components: { Children }, data() { return { obj: { name: '', version: '', features: [] } }; }, methods: { handleObject(data) { this.obj = data; } } }; </script> ``` 通过上述示例可以看出,`$emit` 是 Vue 组件间通信的重要工具,尤其在子组件向父组件传递数据时非常实用。使用 `$emit` 时,确保事件名称的唯一性和语义化,有助于提高代码的可读性和维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值