如何从组件访问导出的 vm(主 vue 实例)对象? [英] How do you access exported vm (main vue instance) object from a component?
问题描述
如果我从 main.js 文件启动我的 vue 实例
//main.jsvar vm = new Vue({el: '#app',渲染:h =>h(应用程序),路由器，数据: {}});出口 {虚拟机}app.vue 本身就是一个路由器视图.
<路由器视图></路由器视图></模板><脚本>导出默认{}所以假设加载到路由器中的组件之一需要访问虚拟机?我已经在组件中做到了这一点:
从 '../main.js' 导入 vm好像找到了main.js文件.但是我如何访问 vm?问题的一个例子是当我使用 vue-lazyload(https://github.com/hilongjw/vue-lazyload) 并且需要像我在这里尝试的那样访问 vm:
<div class="hero-unit-bg" v-lazy:background-image="imgUrl" ></模板><脚本>从'vue'导入Vue从 'vue-lazyload' 导入 VueLazyload从 '../main.js' 导入 vmVue.use(VueLazyload)vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {console.log(el, src)})导出默认{name: '英雄单位',数据 () {返回 {imgUrl: 'img/hero-unit-bg.png'//字符串}},方法: {},}}
控制台显示 vm.$Lazyload 为未定义.所以我认为我没有正确导入 vm.我错过了什么吗?谢谢.
您可能会通过将 main.js 导入到组件中来创建循环依赖.您实际上不需要引用根实例，因为代码 Vue.use(VueLazyLoad) 使插件可以通过 this.$LazyLoad 从任何组件方法访问.
例如，您可以按如下方式设置代码:
main.js:
从 'vue-lazyload' 导入 VueLazyloadVue.use(VueLazyload)App.vue
export default {...安装(){this.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {console.log(el, src)})}}MyComponent.vue
<div v-lazy-container="{选择器:'img' }"><img data-src="//placekitten.com/200/200"><img data-src="//placekitten.com/200/201"><img data-src="//placekitten.com/200/202"></模板>
If I start my vue instance from a main.js file
//main.js
var vm = new Vue({
el: '#app',
render: h => h(App),
router,
data: {
}
});
export {
vm
}
app.vue itself is a router view.
<template>
<router-view></router-view>
</template>
<script>
export default {}
</script>
So lets say one of the components that gets loaded in the router needs access to vm? I've gotten as far as to do this in the component:
import vm from '../main.js'
It seems to find the main.js file. But how do I then access vm? An example of a problem is when I use vue-lazyload(https://github.com/hilongjw/vue-lazyload) and need to access vm like I try here:
<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>
Console shows vm.$Lazyload as undefined. So I don't think I'm importing vm properly. Am I missing something? Thank you.
You'd likely create a circular dependency by importing main.js into a component. You actually don't need to reference the root instance, as the code Vue.use(VueLazyLoad) makes the plugin accessible from any component method via this.$LazyLoad.
For example, you could setup your code as follows:
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>
这篇关于如何从组件访问导出的 vm(主 vue 实例)对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
