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>

效果：