如何在主Vue组件之外访问导入的Vue组件的实例?

时间:2019-01-11 10:12:01

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

我正在将这个简单的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

如何访问在主要Vue组件之外的App.vue中使用的main.js的实例。像下面这样,我将在对主要Vue组件调用firebase方法之前初始化start()

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 的值吗?

1 个答案:

答案 0 :(得分:0)

像这样尝试:

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()

但是未经测试。