vue-root

vue-create-root

🍭 命令式驱动组件, 比如this.$alert('你好vue!');

示例

默认命令

初始化后，通过this.$createRoot可以渲染任意组件.

// main.js中初始化
Vue.use(createRoot);
 
// 组件中调用
{
    methods{
        open(){
            // 此处Com为任意组件
            this.$createRoot(Com, {xxx:'xxx'});
        }
    }
}

自定义命令

// main.js中初始化
Vue.use(createRoot);
// 此处Com为任意组件
Vue.createRoot(Com, {as: 'alert'});
 
// 组件中调用
{
    methods{
        open(){
            this.$alert({xxx:'xxx'});
        }
    }
}

安装

npm i -S vue-create-root

更多例子

监听事件($on)

$createRoot运行后返回vue实例, 所以我们可以用实例上的$on方法监听组件内部事件.

// xxx.vue
const root = this.$createRoot(Com, {xxx:'xxx'});
root.$on('show', ev=>{
    // code ...
});
 
root.$on('hide', ev=>{
    // code ...
});
 
// 如果愿意也可以连续的$on
root.$on('show', ev=>{
    // code ...
}).$on('hide', ev=>{
    // code ...
});
 
// 我们自定义的命令也一样
this.$alert().$on('show', ()=>{
    // code ...
});

无论多少次调用, 都只想渲染一个组件, 单例模式? (isSingle)

// main.js
Vue.createRoot(Com, {
    isSingle: true,
    as: ['alert']
});
 
// xxx.vue
// 页面只会渲染出"你好ts"
const {_uid:id1} = this.$alert({value: '你好js'});
const {_uid:id2} = this.$alert({value: '你好ts'});
id1 === id2 // true

想要类似饿了么 / iView的那种"this.$Message.success()"? (as)

// main.js
Vue.createRoot(Com, {
    as: ['Message', 'success']
});
 
// xxx.vue
this.$Message.success({value: '你好vue!'});

有时候我的传的对象只有一个值, 还要写对象吗? (onProp)

// main.js
Vue.createRoot(Com, {
    as: ['alert'],
    // value对应Com组件上的prop中的value字段
    onProp: 'value'
});
 
// xxx.vue
// 配置后, 以下2种方式均可以使用
this.$alert('你好vue!');
// 等价于
this.$alert({value: '你好vue!'});

销毁($remove)

单例

单例就很简单了, 直接$remove().

this.$alert('你好vue!');
this.$alert('你好朋友!');
this.$alert.$remove();

非单例

$remove()会按照生成顺序, 从后想前删除, 先删除刚刚生成.

const {_uid:id1} = this.$dialog('你好vue!');
const {_uid:id2} = this.$dialog('你好react!');
const {_uid:id3} = this.$dialog('你好angular!');
 
// 删除"你好angular"的实例
this.$dialog.remove();
 
// 删除"你好vue"的实例
this.$dialog.remove(id1);