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

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

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

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

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

<template>
    <div id="Home">
        <h1>加上點加雞蛋</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.效果展示

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章