0.0.1 • Published 5 years ago
vue-root v0.0.1
vue-create-root
:lollipop: 命令式驱动组件, 比如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);
0.0.1
5 years ago