Vue - Vue使用笔记

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

判断DOM是否渲染完成

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

获取slot中的组件对象

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

  1. methods: { 
  2.     ...
  3.     __filterTransbox(){ 
  4.         let transboxs = [];
  5.         let slots = this.$slots.default;
  6.         for(let i = 0; i < slots.length; i++){ 
  7.             let instance = slots[i].componentInstance;
  8.             if(instance == null) continue;
  9.             transboxs.push(instance);
  10.         }
  11.         return transboxs;
  12.     },
  13.     ...
  14. }

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

props传入数字

  1. 定义props为Number

    …
    props:{ 

    1. // bar间距, 多个bar之间的距离，单位px
    2. barGap: { 
    3.     type: Number,
    4.     default: 8
    5. },
    6. // bar宽度，单位px
    7. barWidth: { 
    8.     type: Number,
    9.     default: 3
    10. }

    },
    …

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

    1. ...

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

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

  1. ...
  2. props:{ 
  3.     // bar间距, 多个bar之间距离的像素数
  4.     barGap: { 
  5.         default: '8px'
  6.     },
  7.     // bar宽度
  8.     barWidth: { 
  9.         default: '3px'
  10.     }
  11. },
  12. ...

使用组件时如下：

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

发表评论

表情：
评论列表 （有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue笔记

    > vue中key的作用及原理 作用：key能提升列表渲染速度，而且能在列表增、删、改的时候准确的保持无需变动项的组件或dom状态。 原理：vue在更新列表时

    秒速五厘米秒速五厘米/ 0 赞/ 243 阅读

    相关 Vue - Vue使用笔记

    判断DOM是否渲染完成 在生命周期中，mounted周期是dom渲染后执行的。 在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用`se

    小灰灰小灰灰/ 0 赞/ 415 阅读