vue自定义组件(通过Vue.use()来使用)即install的使用

Posted 2021-11-23 lianxisheng

在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：

1.首先新建一个loading.vue文件

// Cmponent.vue
<template>
    <div>
        ...loading
    </div>
</template>
 
<script>
    export default {
 
    }
</script>
 
<style scoped>
    div{
        font-size:40px;
        color:#fbb;
        text-align:center;
    }
</style>

　　其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件

import LoadingComponent from ‘./loading.vue‘
const loading= {
    install:function(Vue){
        Vue.component(‘LoadingComponent‘,component)
    }  //‘component-name‘这就是后面可以使用的组件的名字，install是默认的一个方法
    
}

export default Loading

　　3.在main.js里面引入

　　

import Loading from ‘./compontents/loading‘

vue.use(Loading);

new Vue({
   el:‘#app‘,
    render:h=>h(App)    
})

　　4.使用

最后你可以在任何想用这个组件的地方插入<Loading></Loading>了 组件相应的样式和js代码可以直接写在第一步中的文件之中！就这样一个自己创建的组件就这么愉快的应用啦！