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>

效果：