自定义vue全局组件use使用


自定义一个全局Loading组件,并使用:
总结目录:
|-components
  |-loading
    |-index.js 导出组件,并且install
    |-loading.vue 定义Loading组件

1.components/loading/index.js

import LoadingComponent from "./Loading.vue"
const Loading = {
    install: function(Vue){
        Vue.component("Loading", LoadingComponent)
    }
}
export default Loading

  

2.components/loading/Loading.vue

<template>
    <div class="loading-box">
        loading...
    </div>
</template>

  

3.main.js

import Vue from 'vue'
import App from './App'
import Loading from "./components/loading/index.js"

Vue.use(Loading)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  

4.App.vue

<template>
    <div id="app">
        <Loading></Loading>
    </div>
</template>

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM