Question

我已经构建了一些组件，例如模态和评论，我想在网站的几乎所有地方使用和重用这些组件。

我在plugins文件夹中制作了一个global.js文件，因此我只在我的nuxt.config.js文件中注册了一次。

在我的global.js文件中，我导入了vue并称其为组件

import Vue from 'vue';
Vue.component('component-modal', () => import('@/components/modal'));
Vue.component('component-modal-other', () => import('@/components/modalOther'));
Vue.component('component-reviews', () => import('@/components/reviews'));

这样做的原因是，现在我不必在要使用它的每个实例上执行component import，只需调用组件<my-component>。

但是，我刚刚切换到通用模式，现在我收到的水化警告全部来自我在插件文件夹中创建的global.js组件文件。

我应该没有global.js文件，并且要全局使用的每个组件在plugins文件夹中都有其自己的文件吗？还是在需要该文件的本地文件中仅导入该组件？

重用和注册我创建的全局迷你组件的最佳方法是什么？

Vue警告

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render

唯一避免此警告的方法是不要将我的组件放入global.js组件文件中，并向Nuxt插件注册它。仅使用导入到每个实例中的组件，这会破坏全局组件的目的

Answer 1

尝试

import Modal from '@/components/modal'
Vue.component('Modal', Modal)

您认为

</modal>

Nuxt JS中的全局组件

1 个答案: