Question

如果我从main.js文件启动我的vue实例

 //main.js
var vm = new Vue({
  el: '#app',
  render: h => h(App),
  router,
  data: {       
  }

});

export {
  vm
}

app.vue本身是路由器视图。

<template>
  <router-view></router-view>
</template>

<script>
  export default {}
</script>

因此，可以说路由器中加载的组件之一需要访问到虚拟机？我已经在组件中做到了这一点：

import vm from '../main.js'

似乎找到了main.js文件。但是如何访问vm？一个问题的例子是当我使用vue-lazyload（https://github.com/hilongjw/vue-lazyload）并需要像在这里尝试的那样访问vm时：

<template>
   <div class="hero-unit-bg" v-lazy:background-image="imgUrl" >
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import vm from '../main.js'

Vue.use(VueLazyload)
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})
export default {
  name: 'HeroUnit',
  data () {
    return {
      imgUrl: 'img/hero-unit-bg.png' // String
    }
  },
    methods: {
    },
  }
}
</script>

控制台将vm。$ Lazyload显示为未定义。所以我认为我没有正确导入vm。我想念什么吗？谢谢。

Answer 1

如果您要这样导出：

export { vm }

然后您需要这样导入它：

import { vm } from './module.js'

对于默认导出，它的工作方式如下：

export default vm

import vm from './module.js'

Answer 2

您可能会通过将main.js导入组件来创建循环依赖关系。实际上，您不需要引用根实例，因为代码Vue.use(VueLazyLoad)使插件可以通过this.$LazyLoad从任何组件方法访问。

例如，您可以按照以下步骤设置代码：

main.js ：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

App.vue

export default {
  ...
  mounted() {
    this.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
      console.log(el, src)
    })
  }
}

MyComponent.vue

<template>
  <div v-lazy-container="{ selector: 'img' }">
    <img data-src="//placekitten.com/200/200">
    <img data-src="//placekitten.com/200/201">
    <img data-src="//placekitten.com/200/202">  
  </div>
</template>

demo

如何从组件访问导出的vm（主vue实例）对象？

2 个答案: