Vue: When object as props, set object's item's default value

[lushijie]

What problem does this feature solve?

When a component has many props, I want to wrap the props as an object, and at the same time I want some props of the object can have a default value.

What does the proposed API look like?

pageInfo: {
  type: Object,
  default: function() {
    return {
      ellipsis: {type: String, default: '...'},
      totalPage: {type: Number, default: 40},
      currentPage: {type: Number, default: 10},
      pagePad: {type: Number, default: 2},
      pageSize: {type: Number, default: 10},
      preText: {type: String, default: '前一页'},
      nextText: {type: String, default: '后一页'},
      firstText: {type: String, default: '首页'},
      lastText: {type: String, default: '尾页'},
      onPageClick: {type: Function, default: function(){}}
    }
  }
}

[Kingwl]

thanks for your suggestion
but why don't you pass object items as props....

[lushijie]

I really pass an object as prop like

// in the index.vue
<Pagination :pageInfo="pageInfo"/> 

data () {
    return {
      pageInfo: {
        totalPage: 50,
        currentPage: 10,
        onPageClick: function(currentPage, pageSize, evt) {
          console.log(currentPage, pageSize, evt);
        }
      }
    }
  }

I hope the pageInfo can't merge with the default value.But now I get

// in the pagination.vue
pageInfo: {
    totalPage: 50,
    currentPage: 10,
    onPageClick: function(currentPage, pageSize, evt) {
      console.log(currentPage, pageSize, evt);
    }
}

in the component.

[dyw934854565]

ha, all you wanted is expression in JSX like
<Pagination {...pageInfo} />

[jkzing]

Use v-bind directly can be another option for your situation.

<Pagination v-bind="pageInfo" />

[LinusBorg]

Apart from the fact that this probably would require a breaking change, I think this would make the props definition API unnecessarily complicated.

Just use a computed property:

props: {
  pageInfo: { type: Object }
},
computed: {
  normalizedPageInfo() {
    return Object.assign({
      ellipsis: '...'/*, other default values*/
    }, this.pageInfo)
  }
}

[Kingwl]

@jkzing and @LinusBorg said cn solve some of the problems
If you need type check you'd better pass them one by one or use jsx
this feature can not cause a good enough effect
but the cost of achieving it is relatively large

[lushijie]

many thanks @all of you

[RaymondAtivie]

What you want to achieve is possible with

If you ended up here looking for how to do it with an object, it looks like this (take note of the brackets):

props: {
  yourProp: {
    type: Object,
    default: () => ({
      param: value,
      param2: value,
    }),
  },
},

Thanks to: @endoplasmic on https://github.com/vuejs/vue/issues/1032