Vue.use中怎么自定义全局组件

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

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

webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明

import Vue from 'vue' import App from './App.vue' // 引入element-ui组件 import ElementUi from 'element-ui' import 'element-ui/lib/theme-default/index.css' // 引入自定义组件。index.js是组件的默认入口 import Loading from '../components/loading' Vue.use(Loading); Vue.use(ElementUi); new Vue({  el: '#app',  render: h => h(App) })

然后在Loading.vue里面定义自己的组件模板

<!-- 这里和普通组件的书写一样 --> <template>   <div class="loading">     loading...   </div> </template>

在index.js文件里面添加install方法

import MyLoading from './Loading.vue' // 这里是重点 const Loading = {   install: function(Vue){     Vue.component('Loading',MyLoading)   } } // 导出组件 export default Loading

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

<template>  <div id="app">  <!-- 使用element ui的组件 -->  <el-button>默认按钮</el-button>  <!-- 使用自定义组件 -->  <Loading></Loading>  </div> </template>

下面是效果图

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