如何在自定义组件中使用 Vue.js 插件? [英] How to use a Vue.js Plugin inside a custom Component?

问题描述

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

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

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

解决方案

您有两种方法可以使第三方组件可用于您的自定义 Vue 组件:

1.导入(ES6)并在本地使用

在组件的脚本块中，将其放在顶部:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

在您的组件 VM 中，将其添加到 components 属性:

导出默认{数据 () {return {/* 这里的数据属性 */}},组件: {服务器表、客户端表、事件}}

您现在可以在组件模板中使用 <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 原则(不要重复自己).因此，如果您的整个应用程序在许多方面都需要该插件/第 3 方 Vue 组件，那么这确实是有意义的.

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

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

I need to output a table and it's content which can be updated via Ajax. So I'm planning to use vue-tables-2 (https://github.com/matfish2/vue-tables-2) which is a Vue.js plugin.

Using the Laravel way, I'm writing a Vue.js custom component, so how can I use the vue-tables-2 plugin inside my component?

Here an example of how to use the plugin https://jsfiddle.net/matfish2/jfa5t4sm/ . Unfortunately in the example is not wrapping the plugin inside a component.

解决方案

You have two ways available to make a third party component available to your custom Vue component:

1. Import (ES6) and use locally

In your component's script block, put this on top:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

In your component VM, add this to the components property:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

You can now use the <v-server-table>, <v-client-table> etc in your component template.

2. Import (ES6) globally in your application entry point:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

Then make those parts of vue-tables-2 that you application repeatedly needs available to your main Vue file and all child components:

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

Or/And:

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

This can also be found on the vue-tables-2 documentation GitHub page.

Note: When you are not using a build system like webpack in your Vue application, there's a third way:

3. Make globally available when not using webpack or the likes

Put this in your HTML before including you application script:

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

This will expose a global VueTables object so in your application entry point you can

Vue.use(VueTables.ClientTable);

If you use the global way, you don't have to declare those 3rd party components in the components object of your custom component.

Why would I pick either method over the other?

Importing globally has the advantage of you having to write less code and following the DRY principle (don't repeat yourself). So this does make sense if your whole application at many points needs that plugin/3rd party Vue component.

It does, though, have the downside that it makes your custom components harder to reuse across several applications/projects because they no longer declare their own dependencies.

Also, if your own custom components at some point gets removed from your application for whatever reason, your application will still include the vue-tables-2 package, which might not be needed any more. In this scenario it will uselessly increase your bundle size.

这篇关于如何在自定义组件中使用 Vue.js 插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！