詳解Vue.use自定義自己的全局組件

更新時(shí)間：2017年06月14日 14:56:17 作者：22337383

本篇文章主要介紹了Vue.use自定義自己的全局組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

通常我們?cè)趘ue里面使用別人開發(fā)的組件，第一步就是install,第二步在main.js里面引入，第三步Vue.use這個(gè)組件。今天我簡(jiǎn)單的也來use一個(gè)自己的組件。

這里我用的webpack-simple這個(gè)簡(jiǎn)單版本的腳手架為例，安裝就不啰嗦了，直接進(jìn)入正題

首先看下目前的項(xiàng)目結(jié)構(gòu)：

webpack首先會(huì)加載main.js，所以我們?cè)趍ain的js里面引入。我以element ui來做對(duì)比說明

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是組件的默認(rèn)入口
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'
// 這里是重點(diǎn)
const Loading = {
  install: function(Vue){
    Vue.component('Loading',MyLoading)
  }
}

// 導(dǎo)出組件
export default Loading

接下來就是在App.Vue里面使用組件了，這個(gè)組件已經(jīng)在main.js定義加載了

<template>
 <div id="app">
 <!-- 使用element ui的組件 -->
 <el-button>默認(rèn)按鈕</el-button>

 <!-- 使用自定義組件 -->
 <Loading></Loading>
 </div>
</template>

下面是效果圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺析vue3響應(yīng)式數(shù)據(jù)與watch屬性
這篇文章主要介紹了vue3響應(yīng)式數(shù)據(jù)與watch屬性的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-05-05
vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive）
在使用服務(wù)器端渲染時(shí)，除了服務(wù)端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下
2018-10-10
antd form表單中如何嵌套自定義組件
這篇文章主要介紹了antd form表單中如何嵌套自定義組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue+ElementUI前端添加展開收起搜索框按鈕完整示例
最近一直在用element ui做后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI前端添加展開收起搜索框按鈕的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-05-05
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
vue實(shí)現(xiàn)打印功能的兩種方法
這篇文章主要介紹了vue實(shí)現(xiàn)打印功能的兩種方法,文中通過兩種方法給大家介紹了指定不打印區(qū)域的解決方法，需要的朋友可以參考下
2018-09-09
vue之父子組件間通信實(shí)例講解(props、$ref、$emit)
組件間如何通信，也就成為了vue中重點(diǎn)知識(shí)了。這篇文章將會(huì)通過props、$ref和 $emit 這幾個(gè)知識(shí)點(diǎn)，來講解如何實(shí)現(xiàn)父子組件間通信。
2018-05-05
vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法
下面小編就為大家分享一篇vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02