前言
全局注册组件的优势在于,当某个弹框之类的组件在全局中注册后使用方便,可以自定义组件显示条件,全局任何地方使用(例如:弹框提示loading、fail、success...等等)
这需要用的核心就是
Vue.use()
这个vue全局api,Vue.use
官网说的很笼统,可以先作为了解
正文
首先先如图创建组件文件及js
WX20180308-144354@2x.png
Loading.vue
<template lang="html"> <div class=""> {{ data }} </div> </template> <script> export default { name: 'loading', data() { return { data: 'loadig...' } } } </script> <style lang="css"> </style>
index.js
import myLoading from './Loading' //方法一:这种方法很简单,需要使用使用时,直接在使用的地方加上<Loading/>标签就行 const Loading = { install: function(vue) { vue.component('Loading', myLoading) } } // 方法二:这种是直接显示,在显示该组件是可以加设条件判断,让组件在特定的条件下显示(诸如 提示弹框) const Loading = { install: function(vue) { vue.component('Loading', myLoading) const LoadingObj = vue.extend(myLoading) let vm = new LoadingObj({ el: document.createElement('div') }) console.log(vm); document.body.appendChild(vm.$el) } } // 导出组件 export default Loading
3.main.js
import Vue from 'vue'import App from './App'//这里从loading文件中默认倒入index.js文件import Loading from './components/loading'Vue.use(Loading)export const $vueApp = new Vue({ el: '#app', render: h => h(App), components: { App }, template: '<App/>'})
如果采用第二种方法到这了页面已经显示你设置的全局组件
如果采用第一种方法还需要在想要显示的组件中直接使用<Loading/>标签即可
Vue简单只是在于上手容易,高阶用法很多,还需要努力
作者:茶树菇小学生
链接:https://www.jianshu.com/p/5a30caab2cb3
。