Vue.use中怎么自定义全局组件 - 行业资讯 - 肥雀云

　　介绍

本篇文章给大家分享的是有关Vue。使用中怎么自定义全局组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

首先看下目前的项目结构:

webpack首先会加载主要。js,所以我们在主要的js里面引入。我以ui元素来做对比说明

import Vue 得到& # 39;vue # 39; 　　import App 得到& # 39;。/App.vue& # 39;//,引入element-ui组件　　import ElementUi 得到& # 39;element-ui& # 39; 　　import & # 39; element-ui/lib/theme-default index.css& # 39;//,引入自定义组件.index.js是组件的默认入口　　import Loading 得到& # 39;. ./组件/加载# 39; 　　Vue.use(加载); 　　　　Vue.use (ElementUi); 　　Vue ({new 　　,el: & # 39; #应用# 39; 　　,呈现:h =祝辞,h(应用) 　　})

然后在装载。vue里面定义自己的组件模板

& lt; !——,这里和普通组件的书写一样,——比; 　　& lt; template> 　　& lt;才能div 类=發oading"比; 　　,,,加载… 　　& lt;才能/div> 　　& lt;/template>

在索引。js文件里面添加安装方法

import MyLoading 得到& # 39;。/Loading.vue& # 39;//,这里是重点　　const Loading =, { 　　安装:才能,函数(Vue) { 　　,,,Vue.component(& # 39;加载# 39;,MyLoading) 　　,,} 　　}//,导出组件　　export default 加载

接下来就是在App.Vue里面使用组件了,这个组件已经在主要。js定义加载了

& lt; template> 　　,& lt; div id=癮pp"比; 　　,& lt; !——,使用element ui的组件,——比; 　　,& lt; el-button>默认按钮& lt;/el-button> 　　　　,& lt; !——,使用自定义组件,——比; 　　,& lt; Loading> & lt;/Loading> 　　,& lt;/div> 　　& lt;/template>

下面是效果图

Vue。使用中怎么自定义全局组件

以上就是Vue.use中怎么自定义全局组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。