11

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

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

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

4

5 回答 5

14

您有两种方法可以使第三方组件可用于您的自定义 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 包，这可能不再需要了。在这种情况下，它将无用地增加您的捆绑包大小。

于 2018-01-02T20:07:47.727 回答
1

通常，当一个组件耦合到一个插件时，我使用created：

created() {
    Vue.use(MustUsePlugin, { someOption: this.someProp });
},
于 2020-12-11T09:48:00.660 回答
-1

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

于 2018-01-06T05:55:06.430 回答
-2

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

于 2018-01-02T19:34:57.413 回答
-2

如何安装插件

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

于 2018-01-02T19:36:21.650 回答