从 .js 文件 vuejs 访问组件

Posted 2023-02-23

【中文标题】从 .js 文件 vuejs 访问组件

【英文标题】：access component from .js file vuejs

【发布时间】：2020-10-25 21:06:06

【问题描述】：

我正在使用：https://www.npmjs.com/package/vue-loading-overlay

我的main.js 文件如下所示：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue(
  render: h => h(App),
).$mount('#app')

还有 App.vue：

<template>
  <div id="app">
    <loading
        :active.sync= "isLoading" 
        :can-cancel= "false" 
        :is-full-page= "false">
    </loading>
    <router-view></router-view>
  </div>
</template>

<script>
//import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

//Vue.use(Loading);

export default 
    data() 
            return 
                isLoading: true
            
        ,
  name: 'App',
  components: 
    Loading
  

</script>

<style>
</style>

这似乎工作正常，但我如何从main.js 操纵isLoading 为真或假？我可能会在 main.js 中构建一个函数或其他东西以供将来使用，而不是在每个视图页面上都有 <loading>，我希望能够以某种方式全局控制它。

【问题讨论】：

也许你可以将 isLoading 属性传递给 App.vue：***.com/a/50757116

【参考方案1】：

我没有对此进行测试，但根据我评论中引用的答案，这可能有效：

main.js

new Vue( 
    el: '#app',
    props: ['isLoading'], 
    components:App, 
    template: '<App v-bind:isLoading="true">' 
)

您必须将 isLoading 设置为 App.vue 中的道具。上面的 v-bind 部分应该使 prop 反应。

另外，您可以创建一个总线并将事件从 main.js 发送到 App.vue，然后相应地更新 isLoading。

【参考方案2】：

你应该使用 store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store(
    state: 
        isLoader: false,
    ,
    getters: 
        isLoader(state) 
            return state.isLoader
        ,
    ,
    mutations: 
        isLoader(state, status) 
            state.isLoader = status
        ,
    ,
    actions: 
        isLoader(commit, status) 
            commit('isLoader', status)
        ,
    
)

在您的应用程序的任何地方，您都可以使用 dispatch 将 isLoader 设置为 true

vue.$store.dispatch("isLoader", true/false);

【讨论】：

除非在整个应用程序中都使用 Vuex，否则仅仅为此使用它可能会变得很麻烦。

用原型变量判断真假怎么样？

是的，你是对的，但是对于这个事件，我相信他会想要从不同的组件渲染加载器。我认为从商店管理装载机很流行。如果我不正确，请纠正我。

添加属性来管理真/假，可能是一个好主意，仅适用于应用程序组件。但是，如果您想从应用程序中的其他路由呈现加载器，则与应用程序组件无关。你会有麻烦的。