从 VueJS 中的事件传递数据

Posted

技术标签:

【中文标题】从 VueJS 中的事件传递数据【英文标题】:Pass data from event in VueJS 【发布时间】:2019-02-18 11:41:31 【问题描述】:

所以,我正在使用 VueJS 开发一个 Cordova android 应用程序,我使用 background geolocation plugin

它发出名为“位置”的全局事件,我的应用在 main.js 中侦听该事件

function onDeviceReady () 
  BackgroundGeolocation.on('location', (location) => )


document.addEventListener('deviceready', onDeviceReady, false)

如何在每次触发事件时将位置数据传递给组件中的变量?

【问题讨论】:

【参考方案1】:

尝试在组件的mounted 方法中添加事件侦听器,并将其处理程序指向组件方法,如下所示:

export default 
    data() 
        return 
            location: null,
        
    ,
    mounted() 
        document.addEventListener('deviceready', this.onDeviceReady, false)
    ,
    beforeDestroy() 
        // remember to remove event listener
        document.removeEventListener('deviceready', this.onDeviceReady)
    ,
    methods: 
        onDeviceReady() 
            BackgroundGeolocation.on('location', this.handleLocation)
        ,
        handleLocation(location) 
            // you've got location!
            this.location = location
        
    
)

【讨论】:

非常感谢,您真的为我节省了很多时间!我只能补充说我添加了window.BackgroundGeolocation.on() 以使其正常工作。

以上是关于从 VueJS 中的事件传递数据的主要内容,如果未能解决你的问题,请参考以下文章

在VueJS 2中通过v-for中的道具将数据从父级传递给子级

无法从Vuejs中的子组件向父组件发出事件

Vuejs将动态数据从父组件传递给子组件

Vuejs 2 - 从 JSON 传递数据

VueJS3:从路由定义中传递数据

将数据从 Node 传递到 Vuejs