您的位置:首页 > Web前端 > Vue.js

自定义vue全局组件use使用

2018-02-28 18:25 951 查看

自定义一个全局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>

  

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: