Vue - Vue使用笔记

小灰灰 2022-05-13 13:00 246阅读 0赞

## 判断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
        }
    },
    ...

1.  传入的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>