Vue - Vue使用笔记 小灰灰 2022-05-13 13:00 251阅读 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>
还没有评论,来说两句吧...