1。导入（ES6）并在本地使用

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组件：

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

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应用程序中没有使用像webpack这样的构建系统时，还有第三种方法：

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

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

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

Vue.use(VueTables.ClientTable);

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

全局导入的优势在于您必须编写更少的代码并遵循DRY原则（不要重复自己）。如果您在许多方面的整个应用程序需要插件/第三方Vue组件，那么这是有意义的。

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

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

Answer 2

所以请按照说明进行操作。

Answer 3

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

Answer 4

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

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

Answer 5

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