Vue2.x实现this调用组件

长期以来，我都是通过父组件引入子组件的方式调用，比如一个Modal，一个Notice之类的，而很多UI框架都可以支持this.$xxx的方法调用展示，很羡慕，很自责，为啥我还在用这么low的方式？而且多个组件引入到父组件会造成层级过深，不利于渲染，而这种方式不仅优雅，而且可以直接将组件挂载到body里面，岂不是美滋滋

实现方法

1.一个Vue文件

<template>
    <div>
        this is count {{count}}
        this is the name prop {{name}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 1
            }
        },
        props: ["name"],
        methods: {
            add(n) {
                this.count += n
            }
        }
    }
</script>

<style scoped>

</style>

随便来点东西，接收props 还有一个方法，应该够用了（嘻嘻）

2.一个js文件，用来写install函数

// 引入 上面那个简陋的组件
import Test from "./Test"

const TestObj = {}

TestObj.install = function(Vue, options) {
    console.log(options)
    const instance = Vue.extend(Test)
    let current;
    current = new instance()
    document.body.appendChild(current.$mount().$el)

    Vue.prototype.$test = {
        show(options) {
            // 传入props
            current.name = options
            return current
        }
    }
}

export default  TestObj;

main.js

import TestObj from "./components/test";
// 此处的第二个参数就是 install方法接收的第二个参数，一半不用，可以用来做更多个性化配置
Vue.use(TestObj, {name: "TESTOBJ"})

调用

this.$test.show("baby").add(520)

结果

组件正确展示，且数据正确