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

Question

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

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

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

Answer 1

您有两种方法可以让第三方组件可用于您的自定义 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']);

或/和：

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

这也可以在vue-tables-2 文档 GitHub 页面上找到。

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

3. 不使用 webpack 之类的时候让全局可用

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

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

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

Vue.use(VueTables.ClientTable);

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

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

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

但是，它确实有一个缺点，它使您的自定义组件更难在多个应用程序/项目中重用，因为它们不再声明自己的依赖项。

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

Answer 2

通常，当组件与插件耦合时，我使用created ：

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

Answer 3

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

Answer 4

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

Answer 5

如何安装插件

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