如何在自定义组件中使用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 -2的那些部分提供给您的主Vue文件和所有子组件：

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

或/和：

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

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

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

3.在不使用webpack或其他类似产品的情况下，向全球提供

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

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

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

Vue.use(VueTables.ClientTable);

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

我为什么要选择任何一种方法而不是另一种方法？

全局导入具有这样的优势:您必须编写更少的代码，并遵循枯燥的原则(不要重复自己)。因此，如果您的整个应用程序在很多时候都需要插件/第三方Vue组件，这确实是有意义的。

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

另外，如果您自己的自定义组件在某个时候因任何原因从应用程序中被移除，您的应用程序仍然将包括vue-tables 2包，这可能不再需要了。在这种情况下，它将徒劳无益地增加您的包大小。

Answer 2

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

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

Answer 3

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