正常情况下使用组件

  •   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>

效果:

Logo

前往低代码交流专区

更多推荐