Vue.js笔记 — 自定义组件

1、先创建一个vue的 loading.vue 文件

2.在创建一个JS 文件引入这个loading.vue
index.js

import Vue from 'vue'
import LoadingComponent from './loading.vue'


//extend 是构造一个组件的语法器.传入参数，返回一个组件
let LoadingConstructor = Vue.extend(LoadingComponent);
let initComponent;

//导出 显示loading组件
export const showLoading = (option={}) => {
    initComponent = new LoadingConstructor();
    initComponent.$mount();
    document.querySelector(option.container || 'body').appendChild(initComponent.$el);
}

//导出 移除loading组件
export const hideLoading = () => {
    initComponent.$el.parentNode.removeChild(initComponent.$el)
}

3.最后创建一个js文件统一挂载所有自定义组件到vue原型上（所有的自定义组件都挂在到这个js）
output.js

import Alert from './alert/index.js'  //alert组件
import { showLoading, hideLoading } from './loading/index.js' //loading组件

const install = function(Vue) { //通过install方法挂载到Vue原型上去
    Vue.prototype.$alert = Alert;
    Vue.prototype.$showLoading = showLoading;
    Vue.prototype.$hideLoading = hideLoading;
}
export default install

4.最后在main.js中引入 output.js

import globalComponents from './components/output'
Vue.use(globalComponents);

最后页面调用

created () {
    this.$showLoading()

    setTimeout( () => {
        this.$hideLoading()
    }, 2000);

}