参考地址 Vue——函数式调用组件
正常情况下使用组件
import 组件
import xxx from 'XXXx/XXX.vue'
注册组件
export default {
components:{
XXX
},
}
然后再使用组件以及配置，如果要显示这个组件就要改别isShow的值
<template>
<div>
<xxx :show="isShow" text="hello"></xxx>
</div>
</template>
所有组件都需要这么去调用，就会有些许麻烦而且不太美观。像Loading、Toast等这些组件，一页面可以经常用到而且每次显示的内容都可能不一样，这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多，而且代码也更整洁。
实现
以Loading组件为例，先创建好loading组件
创建一个loading.js，并在里面引入组件以及Vue
import Vue from 'vue'
import Loading from 'loading.vue'
实例化Vue，并用render函数创建组件模板
const v = new Vue({
render(createElement){
return createElement(Loading)
}
})
渲染DOM，并挂载到body里
v.$mount() //渲染
document.body.appendChild(v.$el) //挂载
获取组件的实例
const load = v.$children[0]
定义需要被暴露的接口
//显示loading弹窗
function showLoading(opt){
//load相当于是在Loading.vue当中的this
//showLoading()就是methons中的函数
load.showLoading(opt)
}
export default {
showLoading
}
最后在mian.js中引入，并且挂到Vue的原型里
import Vue from 'vue'
import loading from './component/Loading.vue'
Vue.prototype.$loading = loading
调用loading
<template>
<div>
<button @click="load">Loading</button>
</div>
</template>
<script>
export default {
name:'test',
data () {
return {}
},
methods: {
load(){
this.$loading.showLoading({
info:'加载中'
})
}
}
}
</script>
效果：