Vue.use自定義全域性元件示例
阿新 • • 發佈:2019-01-05
原文地址:http://www.cnblogs.com/yesyes/p/6658611.html
通常我們在vue裡面使用別人開發的元件,第一步就是install,第二步在main.js裡面引入,第三步Vue.use這個元件。今天我簡單的也來use一個自己的元件。
這裡我用的webpack-simple這個簡單版本的腳手架為例,安裝就不囉嗦了,直接進入正題
首先看下目前的專案結構:
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>
下面是效果圖