vue.js - 如何在主 vue 组件之外访问导入的 vue 组件的实例？

Question

我在我的main.js文件中导入这个简单的 Vue 组件（NativeScript-Vue 应用程序）

应用程序.vue

<template>
  <Page>
    <ActionBar title="Welcome to NativeScript-Vue!"/>
    <StackLayout>
      <Label class="message" :text="msg" col="0" row="0" @tap="log"/>
    </StackLayout>
  </Page>
</template>


<script>

export default {
  data() {
    return {
      msg: "Hello World!"
    }
  },
  methods: {
    log() {
      console.log("clicked")
    }
  }
}
</script>

main.js

如何访问在主 Vue 组件之外App.vue使用的实例。main.js如下所示，我firebase在调用start()主 Vue 组件上的方法之前进行初始化

import Vue from 'nativescript-vue'
import App from './components/App'
import * as firebase from 'nativescript-plugin-firebase'

/* how to access App component's instance here */
firebase.init().then(() => { 
    console.log('firebase initialized') 
    /* how to call log() or change msg's value here */
})

new Vue({
   render: h => h('frame', [h(App)])
}).$start()

我可以以某种方式访问​​导入的组件数据并在初始化 firebase时更改msg的值吗？

Answer 1

试试这样：

import Vue from 'nativescript-vue'
import App from './components/App'
import * as firebase from 'nativescript-plugin-firebase'

/* how to access App component's instance here */
firebase.init().then(() => { 
    console.log('firebase initialized') 
    /* how to call log() or change msg's value here */
    myApp.log()
})

const myApp = new Vue({
   render: h => h('frame', [h(App)])
}).$start()

但它未经测试。