如何在自定义组件中使用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自定义组件的对象中声明这些第三方组件.

为什么我会选择另一种方法？

全局导入的优点是您必须编写更少的代码并遵循DRY原则(不要重复自己).因此,如果您在许多方面的整个应用程序需要插件/第三方Vue组件,这确实有意义.

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

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