1.VUE 开发中遇到的一些问题

1.watch 深度监听 

// 监听--对象属性值-可以是父子穿值===immediate监听深度监听 deep: true, immediate: true
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

    rowtablePolicyDetails: {
      handler(newVal, old) {
        console.log(newVal)
      },
      deep: true,
      immediate: true
    },

2.如何处理精度丢失 浏览器对于十进制的运算计算不够优好,为了处理这个bug我们引入big.js 此处已经挂在到了Vue的原型上,直接用就ok了big.js常用操作及引用方法_铃儿响叮当-CSDN博客

## demo

```js

const x = new this.$Big(0.3);

console.log(x.valueOf(), '自己本身') // 0.3

console.log(x.plus(0.1).valueOf(), '加') // 0.4

console.log(x.minus(0.1).valueOf(), '减法') // 0.2

console.log(x.times(100).valueOf(), '乘') // 30

console.log(x.div(100).valueOf(), '除') // 0.003

3.vue 种作用域插槽问题

1.判断插槽是否存在  $slots['labelbottom']
    <div
      v-if="$slots['labelbottom']"
      :style="{ 'padding-left': node.level * tree.indent + 6 + 'px' }"
      class="slot-tree-label"
    >
      <slot name="labelbottom"></slot>
    </div>
2.作用域插槽-当前的数据
    <div
      :style="{ 'padding-left': node.level * tree.indent + 5 + 'px' }"
      class="slot-tree-label"
    >
      <slot
        name="labelbottom"
        :node="node.data"
      ></slot>
    </div>
3.挂载到父组件-通过slot-scope="scope" 与table表格类似
   <el-tree-node
      v-for="child in root.childNodes"
      :key="getNodeKey(child)"
      :node="child"
      :props="props"
      :render-after-expand="renderAfterExpand"
      :show-checkbox="showCheckbox"
      :render-content="renderContent"
      @node-expand="handleNodeExpand"
    >
      <template
        slot="labelbottom"
        slot-scope="scope"
      >
        <slot
          name="labelbottom"
          :node="scope.node"
        ></slot>
      </template>
    </el-tree-node>

猜你喜欢

转载自blog.csdn.net/weixin_51127384/article/details/121780763
今日推荐