vue.2.0-自定义全局组件

Posted 2020-09-22 672530440

App.vue

<template>
  <div id="app">
    <h3>welcome vue-loading</h3>
    <Loading></Loading>    <!--<Loading></Loading>是自定义组件--> 
  </div> 
</template>

main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘

import Loading from ‘./components/loading‘  //定义Loading,components、loading是一个文件夹，loading里面必须要index.js

Vue.use(Loading)    //use Loading

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

index.js

import LoadingComponent from ‘./Loading.vue‘

const Loading = {     //定义Loading
    install: function(Vue) {//install是必须的
        Vue.component(‘Loading‘, LoadingComponent)//定义一个组件
    }
};

export default Loading

Loading.vue

<template>
    <div class="loading-box">
        {{msg}}
    </div>
</template>
<script>
    export default{
        data(){
            return {
                msg:‘Loading...^_^‘
            }
        }
    }
</script>
<style scoped>
    .loading-box{
        color: red;
        font-size: 40px;
        font-family: 微软雅黑;
        text-shadow: 2px 2px 5px #000;
    }
</style>