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

我需要输出一个表和它的内容，可以通过Ajax更新。 因此，我计划使用vue-tables-2（），这是一个vue.js插件

使用Laravel方法，我正在编写一个Vue.js自定义组件，那么如何在我的组件中使用

Vue-tables-2

插件呢

---

下面是一个如何使用插件的示例。不幸的是，在本例中，没有将插件包装到组件中。

您可以扩展插件，甚至可以从github下载插件并直接对其进行编辑。

---

因此，只需按照说明进行操作。

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

1.导入（ES6）并在本地使用 在组件的脚本块中，将其置于顶部：

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

在组件VM中，将其添加到

components

属性：

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

现在，您可以在组件模板中使用

，

等

2.在应用程序入口点全局导入（ES6）： 然后将应用程序反复需要的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之类的生成系统时，有第三种方法：

3.在不使用webpack或类似工具时使全局可用 在包含应用程序脚本之前，将其放入HTML：

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

如果使用全局方式，则不必在自定义组件的

components

对象中声明这些第三方组件

为什么我会选择其中一种方法而不是另一种？ 全局导入的好处是，您必须编写更少的代码，并且遵循枯燥的原则（不要重复）。因此，如果您的整个应用程序在许多方面需要该插件/第三方Vue组件，这是有意义的

不过，它确实有一个缺点，那就是它使您的自定义组件更难跨多个应用程序/项目重用，因为它们不再声明自己的依赖项

---

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

组件只注册一次，使用

Vue进行全局注册。在项目的入口点使用
（例如
main.js
）。
然后，您可以在所有子体
.vue
文件中使用它们，而无需导入它们。
通常，当组件与插件耦合时，我使用创建的
：

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

当我通过NPM安装模块时，我希望避免编辑插件，并从自定义组件内部调用它。然后我会继续扩展它，或者按照connexo已经说过的做。我在安装模块时没有问题，我不知道如何从自定义Vue组件内部使用它。导入它，在组件的
components
部分声明它并使用它。正如我在下面的回答中所写的，这不是解决问题的方法。这些组件在
Vue中注册。在入口点使用一次
，然后在整个项目中都可以使用。这是一种“懒惰”的方法，可以使第三方组件对整个应用程序（即任何子代组件）可用，如果您在应用程序的许多部分都需要相同的第三方组件，则建议使用这种方法。然而，这并不是OP所要求的。不过，在答案中加入这一点是有道理的。谢谢你的暗示！如何使用方法1指定选项？嗯…，当我尝试在组件（Laravel项目）内部本地使用vue表时，我得到
app.js？id=6518adafaa2115fa97b8:28640[vue warn]：无法装载组件：未定义模板或渲染函数。
。这是我的组件的屏幕截图：这里是错误消息：这是使第三方组件可用于整个应用程序的“惰性”方法，即任何子代组件，如果您在应用程序的许多部分都需要相同的第三方组件，这是可取的。然而，这并不是OP所要求的。
Vue.use(VueTables.ClientTable);

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