时间戳

首页 > 解决方案 > 导入插件时 Vue.use() 的目的是什么？如果我们已经使用了 vue.use ，是否需要将其添加到组件中

vue.js - 导入插件时 Vue.use() 的目的是什么？如果我们已经使用了 vue.use ，是否需要将其添加到组件中

问题描述

我正在使用插件 vue-flag-icon - https://www.npmjs.com/package/vue-flag-icon作为标志，在他们的文档中我看到了以下初始化步骤。

import FlagIcon from 'vue-flag-icon'
Vue.use(FlagIcon);

我需要这个吗？这在他们的文档中没有指定！

export default {
    components: {
        FlagIcon. /// do i need to give it here ?
    },
}

这是什么目的，Vue.use(...)即使我删除它也可以正常工作。有人可以帮帮我吗？

检查了 vue 文档 - https://vuejs.org/v2/guide/plugins.html。

没有明确的想法

标签： vue.js

解决方案

Vue.use 会自动阻止你多次使用同一个插件，因此在同一个插件上多次调用它只会安装一次插件。

对于flag组件，它声明了一个全局组件，您可以在组件中引用该组件，以便在以下示例中正确呈现。

在 vue-flag-icon 源代码中

install: function (Vue) {
    if (VuePlugin.installed) {
        return;
    }
    VuePlugin.installed = true;
    Vue.component('flag', Flag);
}

您可以看到Vue.component('flag', Flag)这是一个根级组件声明，因此，在您的组件中，您不需要声明如下内容

如果使用 Vue.use 则不需要

import { Flag } from "vue-flag-icon"

export default {
  components: { Flag }
}

如果不使用 Vue.use，flag如果您没有将其作为组件包含在您的 vue init 中，模板中的标签将引发错误。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <flag iso="it" />
    <flag iso="gb" />
    <flag iso="us" />
  </div>
</template>

<script>

export default {
  name: 'app',
}
</script>

推荐阅读