laravel 如何在自定义组件中使用 Vue.js 插件？

How to use a Vue.js Plugin inside a custom Component?

提问by Luigi T.

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.

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

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

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

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.

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

回答by connexo

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

您有两种方法可以让第三方组件对您的自定义 Vue 组件可用：

1. Import (ES6) and use locally

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

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 componentsproperty:

在您的组件 VM 中，将此添加到components属性中：

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.

现在，您可以用<v-server-table>，<v-client-table>等你的组件模板。

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

2. 在您的应用程序入口点全局导入 (ES6)：

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-tables-2 部分可用于您的主 Vue 文件和所有子组件：

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.

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

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

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

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

3. 不使用 webpack 之类的时候让全局可用

Put this in your HTML before including you application script:

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

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

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

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

Vue.use(VueTables.ClientTable);

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

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

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.

全局导入的优点是您必须编写更少的代码并遵循 DRY 原则（不要重复自己）。因此，如果您的整个应用程序在很多时候都需要该插件/第 3 方 Vue 组件，那么这确实有意义。

It does, though, have the downsidethat it makes your custom components harder to reuseacross 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-tables-2 包，它可能不再需要。在这种情况下，它会无用地增加您的包大小。

回答by Matanya

The components are registered only once, globally, using Vue.usein the entry point to your project (e.g main.js). Then you can use them in all descendant .vuefiles without importing them.

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

回答by Pavel

How to install plugin

如何安装插件

So just follow the instructions.

所以只需按照说明操作即可。

回答by Maxim

You could extend it or even download it from github and edit it directly

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