vue如何編寫組件可以通過Vue.use()使用

一般平時用別人的組件時都是通過import引入然后Vue.use()來使用,那么如何讓我們寫的組件也可以用這種方式使用呢?

1.首先新建一個文件夾例如:Home,然后在該文件中新建兩個文件Home.vue和index.js

文件

2.在Home.vue中和往常一樣如:

<template>
    <div id="Home">
        <h1>加上點(diǎn)加雞蛋</h1>
    </div>
</template>
<script>
    export default{
        name:"Home"
    }
</script>

3.接下來是index.js的編寫(主要)

import Home from './Home.vue'
// install方法必須有
export default{
    install:function(Vue) {
        Vue.component('Home',Home);
    }
}

4.接下來就可以在main.js中美美的引入你的組件了

import Home from './components/Home'
Vue.use(Home)

5.使用(在App.vue中)

<div id="app">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
    <Home></Home>
</div>

6.效果展示

效果展示

個人博客https://myml666.github.io

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1 Webpack 1.1 概念簡介 1.1.1 WebPack是什么 1、一個打包工具 2、一個模塊加載工具 3...
    Kevin_Junbaozi閱讀 7,027評論 0 16
  • ____見此圖有感 在風(fēng)中佇立,我凝望著 這個王朝的孤寂 顛沛,不會使人更加安寧 在流離中,尊嚴(yán)已經(jīng)瀕臨死...
    俞壹閱讀 546評論 2 4
  • 當(dāng)一個人生活枯燥的時候,他忘了用心體會是一種習(xí)慣。 當(dāng)一個人人生乏味的時候,他忘了培養(yǎng)幽默是一種習(xí)慣。 當(dāng)一個人體...
    16aa5fab5f62閱讀 178評論 0 0
  • 《歐美》01 V字仇殺隊(duì) 阿甘正傳 傲慢與偏見 ...
    feng_Zi閱讀 316評論 0 2
  • 一、我只是在寫作,而非創(chuàng)作。其實(shí)寫作都算不上,大多時候,只能算記錄。記錄心情上的起伏,記錄喜怒哀樂。 二、我是真的...
    李曉欣閱讀 325評論 34 38

友情鏈接更多精彩內(nèi)容