您有两种方法可以使第三方组件可供您的自定义 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']);
Or/And:
Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);
这也可以在vue-tables-2 文档 GitHub 页面 https://github.com/matfish2/vue-tables-2.
注意:当您在 Vue 应用程序中不使用像 webpack 这样的构建系统时,还有第三种方法:
3. 不使用webpack等时使全局可用
在包含应用程序脚本之前将其放入 HTML 中:
<script src="/path/to/vue-tables-2.min.js"></script>
这将暴露全球VueTables
对象,因此在您的应用程序入口点您可以
Vue.use(VueTables.ClientTable);
如果您使用全局方式,则不必在components
您的自定义组件的对象。
为什么我会选择其中一种方法而不是另一种?
全局导入的优点是您必须编写更少的代码并遵循 DRY 原则(不要重复)。因此,如果您的整个应用程序在很多时候需要插件/第 3 方 Vue 组件,那么这确实有意义。
不过,它确实有downside它使您的自定义组件更难重用跨多个应用程序/项目,因为它们不再声明自己的依赖项。
此外,如果您自己的自定义组件出于某种原因从应用程序中删除,您的应用程序仍将包含 vue-tables-2 包,可能不再需要它。在这种情况下,它会毫无用处地增加你的包大小。