javascript - 避免子组件中的未定义值

Question

我有一个页面的子组件:

<template>
  <div class="ll-page-wrapper">
    <div class="ll-page-div">
      <Page :total="data_count" :current="cur_page" @on-change="changePage"></Page>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      data_count: {
        type: Number,
        required: true
      }
    }
  }
</script>

我在父组件中使用:

<ll-page :data_count="os_type_data.count" 
         @change_page_for_parent="os_type_change_page"></ll-page>

有时 os_type_data.count 是undefined，因为它还没有被获取。

我想避免这个问题，我不想在父组件中更改代码，因为这会影响用户体验。我想在子组件中修复它，我该怎么做？

Answer 1

props 项有一个验证器参数:

例如:

Vue.component('example', {
  props: {
    ...
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

您可以像下面这样更改您的子组件 props 代码:

props: {
  data_count: {
    type: [Number, undefined],
    required: true,
    validator:function (value) {
      if (!value) {
        return 1
      }
    }
  }
},