VueJS - 将单独的组件加载到 vue 实例中答案

【问题标题】：VueJS - Load separate component into vue instanceVueJS - 将单独的组件加载到 vue 实例中
【发布时间】：2019-11-28 04:50:36
【问题描述】：

在我的工作中，我目前正在重新设计我们的网络平台，包括将大量旧的 javascript / jquery 迁移到 VueJS。

我有一个 global.js 文件，其中包含我们的 Vue 组件，我们有一个 vendor.js 文件，其中包含 Vue、Axios、Vuex...

现在我们的网站上有一个文本编辑器，这个编辑器有一个 Vue 版本。问题是这个文本编辑器非常大，几乎 500kb 用于生产。所以我在一个单独的文件中为这个编辑器创建了一个单独的组件，因为我们只需要它在两个页面上。

现在，由于我的全局 Vue 占据了整个页面，因此我无法将文本编辑器插入其中，因为您无法将 Vue 实例放入另一个 Vue 实例。

有没有一种方法可以让我将编辑器保存为一个完全独立的文件，但在页面加载时以某种方式使用全局 Vue 实例？

我已经搜索了很多，但在任何地方都没有遇到过这个问题。也许不可能做到这一点。

【问题讨论】：

您是使用自己的文本编辑器还是第三方库？你能说说你用的是什么文本编辑器吗？
明确地说，您遇到的问题是文本编辑器和页面其余部分之间的版本不匹配？即“现在我们的网站上有一个文本编辑器，这个编辑器有一个 Vue 版本”

标签： javascript jquery vue.js vue-component

【解决方案1】：

尝试异步加载TextEditor.vue。

new Vue({
  // ...
  components: {
    TextEditor: () => import("./TextEditor.vue")
  }
})

Reference.

【讨论】：

【解决方案2】：

您可以将编辑器的 CSS 修改为 position:fixed 或 position:absolute 并将其放入您的应用组件中。然后使用v-if 切换可见性。

您还可以使用第 3 方对话框组件包装您的编辑器，将其包装到一个模态弹出窗口中。

另一个不相关的建议是，如果组件尺寸较大，则使用延迟加载。

【讨论】：

【解决方案3】：

您可以通过imports 和.vue 文件中的components 属性将多个Vue 文件合并在一起。

<template>
   <div>
      <TextEditor></TextEditor>
   </div>
</template>

<script>
import TextEditor from 'path/to/TextEditor.vue';

export default {
   name: 'Main',
   components: {
      TextEditor
   }
}
</script>

此外，您可以将其设置为动态导入。如果你的项目是使用vue-cli 设置的，那么你应该已经安装了 webpack。如果是这种情况，您还可以将动态导入设置为以下两种类型之一：prefetch or preload。本质上，当应用程序空闲时预取下载文件，并且预加载将其与主要组件并行下载。实现这些方面中的任何一个最终都会如下所示：

export default {
   name: 'Main',
   components: {
      TextEditor: import(/* webpackPrefetch: true */ 'path/to/TextEditor.vue')
      /* OR */
      // TextEditor: import(/* webpackPreload: true */ 'path/to/TextEditor.vue')
   }
}

【讨论】：

【解决方案4】：

您应该看看将您的捆绑包拆分为多个块：https://webpack.js.org/guides/code-splitting/

仅在需要它的页面上加载您的文本编辑器块。

【讨论】：

【解决方案5】：

您可以将 Vue 实例放入另一个 Vue 实例中。

假设我有以下 HTML

<div id="main-app"></div>


new Vue({
  el: "#main-app",
  template: `<div>
        This is my main application which has an editor div
        <div id="editor"></div>
     </div>`
});


new Vue({
  el: "#editor",
  template: `<div>
        This is my editor component
     </div>`
});

最终生成的 HTML 将是

<div>
  This is my main application which has an editor div
  <div>
    This is my editor component
  </div>
</div>

【讨论】：