如何在自定义组件中使用 Vue.js 插件？

How to use a Vue.js Plugin inside a custom Component?

我需要输出一个 table，它的内容可以通过 Ajax 更新。 所以我打算使用 vue-tables-2 (https://github.com/matfish2/vue-tables-2) 这是一个 Vue.js 插件。

使用 Laravel 方式，我正在编写一个 Vue.js 自定义组件，那么如何在我的组件中使用 vue-tables-2 插件？

这里是如何使用插件的示例 https://jsfiddle.net/matfish2/jfa5t4sm/。不幸的是，示例中没有将插件包装在组件中。

您可以扩展它，甚至可以从 github 下载它并直接编辑它

How to install plugin

所以只需按照说明进行操作即可。

您可以通过两种方式使第三方组件对您的自定义 Vue 组件可用：

1。导入 (ES6) 并在本地使用

在您组件的脚本块中，将其置于顶部：

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

在您的组件 VM 中，将其添加到 components 属性:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

您现在可以在组件模板中使用 <v-server-table>、<v-client-table> 等。

2。在您的应用程序入口点全局导入 (ES6)：

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

然后让您的应用程序重复需要的 vue-tables-2 的那些部分可用于您的主 Vue 文件和所有子组件：

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Or/And:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

这也可以在 vue-tables-2 documentation GitHub page 上找到。

注意：当你没有在你的 Vue 应用程序中使用像 webpack 这样的构建系统时，还有第三种方式：

3。在不使用 webpack 或类似工具时使全局可用

在包含您的应用程序脚本之前将其放入您的 HTML：

<script src="/path/to/vue-tables-2.min.js"></script>

这将公开一个全局 VueTables 对象，因此您可以在您的应用程序入口点

Vue.use(VueTables.ClientTable);

如果您使用全局方式，则不必在自定义组件的 components 对象中声明那些第 3 方组件。

为什么我会选择其中一种方法而不是另一种方法？

全局导入的优点是您不必编写更少的代码并遵循 DRY 原则（不要重复自己）。因此，如果您的整个应用程序在许多方面都需要 plugin/3rd 派对 Vue 组件，那么这确实有意义。

不过，它确实有 缺点，它会使您的自定义组件 难以在多个 applications/projects 中重用 因为他们不再声明自己的依赖项。

此外，如果您自己的自定义组件在某个时候出于某种原因从您的应用程序中删除，您的应用程序仍将包含 vue-tables-2 包，可能不再需要它。在这种情况下，它会无用地增加您的包大小。

组件仅注册一次，全局，在项目的入口点使用 Vue.use（例如 main.js）。 然后您可以在所有后代 .vue 文件中使用它们而无需导入它们。

通常，当组件耦合到插件时，我使用created:

created() {
    Vue.use(MustUsePlugin, { someOption: this.someProp });
},