如何在主 vue 组件之外访问导入的 vue 组件的实例？答案

【问题标题】：How to access imported vue component's instance outside main vue component?如何在主 vue 组件之外访问导入的 vue 组件的实例？
【发布时间】：2019-06-06 05:58:30
【问题描述】：

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

App.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

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

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 的值？

【问题讨论】：

标签： vue.js vue-component nativescript-vue

【解决方案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()

但它未经测试。

【讨论】：