Vue - Vue使用笔记

判断DOM是否渲染完成

• 在生命周期中，mounted周期是dom渲染后执行的。
• 在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用setTimeout(()=>{}, 0)或者使用this.$nextTick(()=>{})。

获取slot中的组件对象

从slot中获取组件对象可以参考以下代码：

methods: {
	...
    __filterTransbox(){
        let transboxs = [];
        let slots = this.$slots.default;
        for(let i = 0; i < slots.length; i++){
            let instance = slots[i].componentInstance;
            if(instance == null) continue;
            transboxs.push(instance);
        }
        return transboxs;
    },
	...
}

这里的slots[i].componentInstance就是VueComponent对象。这个对象可能为undefined，需要在子组件渲染后才能获取到该对象。

props传入数字

1. 定义props为Number

...
props:{
    // bar间距, 多个bar之间的距离，单位px
    barGap: {
        type: Number,
        default: 8
    },
    // bar宽度，单位px
    barWidth: {
        type: Number,
        default: 3
    }
},
...

2. 传入的props时需要使用v-bind，如果不使用v-bind则将作为String来传递导致类型检查失败。下面是正确的使用方式：

<transbox-group :bar-width="5" :bar-gap="8">
	...
</transbox-group>

props使用xxx-xx方式定义属性

当我们自定义组件需要传递类似’xxx-xx’的名称时，可以通过驼峰命名来完成，如下：

...
props:{
    // bar间距, 多个bar之间距离的像素数
    barGap: {
        default: '8px'
    },
    // bar宽度
    barWidth: {
        default: '3px'
    }
},
...

使用组件时如下：

<transbox-group bar-width="5px" bar-gap="8px">
    <transbox>1</transbox>
    <transbox>2</transbox>
    <transbox>3</transbox>
</transbox-group>