自定义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>
相关文章推荐
- 自定义vue全局组件use使用、vuex的使用
- 自定义vue全局组件use的使用
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- 自定义vue全局组件use使用、vuex的使用详解
- vue 自定义全局方法,在组件里面的使用介绍
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- 使用use注册Vue全局组件和全局指令的方法
- Vue.use自定义全局组件示例
- 使用use注册Vue全局组件和全局指令
- vue--自定义全局方法,在组件里面使用
- vue插件 使用use注册Vue全局组件和全局指令
- Vue.use自定义自己的全局组件
- 详解Vue.use自定义自己的全局组件
- 使用vue.use(##)构建全局方法,用this.$##使用,同时给自定义的方法 传递component调用其方法 //eventHub
- vue--自定义全局方法,在组件里面使用
- vue自定义全局组件(自定义插件)
- 三步搞定自定义Vue全局组件
- vue组件化挖矿之旅(三):vue-cli 自定义过滤器的使用
- yii2 自定义组件-全局使用图片上传功能
- Vue组件之全局组件与局部组件的使用详解