0

所以这个问题可能很复杂，但我会尽量解释清楚。

我目前正在创建 Nuxt 模块。如果您熟悉创建它们，您就知道可以在nuxt.config.js. 我在这里所做的：

components: {
    modules: ['carousel', 'filter', 'post-loop', 'gform'],
    gform: {
         title: true
    }
},

我有一组要全局注册的模块。我已经使用以下配置完成了此操作：

(index.js)

const path = require('path');

export default function ClassName(moduleOptions) {

    const options = Object.assign({}, this.options.components, moduleOptions);
    const availableModules = ['carousel', 'filter', 'gform', 'post-loop'];
    const unknownModules = options.modules.filter(mod => !availableModules.includes(mod));

    if(!options.modules) {
        throw new Error('ERROR: Please check the ReadMe, you need to include a modules array specifying what modules you want to enable');
    }

    if(unknownModules.length > 0) {
        throw new Error(`ERROR: The following modules do not exist in the @blueelevation/components module: ${unknownModules}`);
    }

    this.addPlugin({
        src: path.resolve(__dirname, './plugin/plugin.js'),
        options: options
    })

    const cssFilesToLoad = ['carousel.css'];

    cssFilesToLoad.forEach(file => this.options.css.push(path.resolve(__dirname, `dist/css/${file}`)));

    this.addPlugin({
        src: path.resolve(__dirname, './plugin/eventbus.js'),
    })
}

需要关注的重要部分是plugin.js我在 Nuxt 实例中全局注册组件：

import Vue from 'vue';

/**
 * If the module array contains carousel, we register it as a global component.
 */
<% if(options.modules.includes('carousel')) { %>
    import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue';
    Vue.component('Carousel', Carousel);
<% } %>

/**
 * If the module array contains post-loop, we register it as a global component.
 */
<% if(options.modules.includes('post-loop')) { %>
    import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue';
    Vue.component('pwa-post-loop', PostLoop);
<% } %>

/**
 * If the module array contains filter, we register it as a global component.
 */
<% if(options.modules.includes('filter')) { %>
    import Filter from '@blueelevation/components/components/Filter/Filter.vue';
    import FilterHeading from '@blueelevation/components/components/Filter/FilterHeading.vue';
    Vue.component('pwa-filter', Filter);
    Vue.component('pwa-filter-heading', FilterHeading);
<% } %>

/**
 * If the module array contains gform, we register it as a global component.
 */
<% if(options.modules.includes('gform')) { %>
    import GForm from '@blueelevation/components/components/GForm/GForm.vue';
    Vue.component('pwa-gform', GForm);
<% } %>

如您所见，我在全局注册组件，以防它在数组中指定。我目前坚持的部分是gform.title我的nuxt.config.js. 如何将此传递Boolean给全局注册的 GForm 组件？所以我可以有条件地呈现标题以防万一true？

4

1 回答 1

0

我回答了我自己的问题。如果有人想知道如何做到这一点，您可以通过执行以下操作将某些内容注入到您的组件中plugin.js：

import Vue from 'vue';
import Carousel from '@blueelevation/components/components/Carousel/Carousel.vue';
import PostLoop from '@blueelevation/components/components/PostLoop/PostLoop.vue';
import Filter from '@blueelevation/components/components/Filter/Filter.vue';
import FilterHeading from '@blueelevation/components/components/Filter/FilterHeading.vue';
import GForm from '@blueelevation/components/components/GForm/GForm.vue';

    export default(context, inject) => {
    /**
     * If the module array contains carousel, we register it as a global component.
     */
    <% if(options.modules.includes('carousel')) { %>
        Vue.component('Carousel', Carousel);
    <% } %>

    /**
     * If the module array contains post-loop, we register it as a global component.
     */
    <% if(options.modules.includes('post-loop')) { %>
        Vue.component('pwa-post-loop', PostLoop);
    <% } %>

    /**
     * If the module array contains filter, we register it as a global component.
     */
    <% if(options.modules.includes('filter')) { %>
        Vue.component('pwa-filter', Filter);
        Vue.component('pwa-filter-heading', FilterHeading);
    <% } %>

    /**
     * If the module array contains gform, we register it as a global component.
     */
    <% if(options.modules.includes('gform')) { %>
        Vue.component('pwa-gform', GForm);
        inject('GForm', {config: <%= serialize(options.gform) %> });
    <% } %>
}

注意inject()gform 组件的全局注册下面的函数。我注入GForm了一个序列化的对象（options.gform如 中所见nuxt.config.js）。之后，此GForm配置将通过以下方式在组件中可用：

this.$GForm.config.

希望这对将来的人有所帮助。

于 2021-05-04T11:21:16.090 回答