I am quite new to VueJS. In react you can easily use rest params for passing props to children. Is there a similar pattern in Vue?
Consider this parent component that has a few children components:
<template><header class="primary-nav"><search-bar :config="searchBar"><search-bar>// ^^^^ this becomes the key on the props for SearchBarheader></template>export default { data(){ return { ... a few components ... searchBar : { model: '', name: 'search-bar', placeholder: 'Search Away', required:true, another: true andanother: true, andonemoreanotherone:true, thiscouldbehundredsofprops:true } } }}<template><div :class="name"><form action="/s" method="post"><input type="checkbox"><label :for="config.name" class="icon-search">{{config.label}}</label><text-input :config="computedTextInputProps"></text-input> //^^^^ and so on. I don't like this config-dot property structure.</form></div></template> export default { props: { name: String, required: Boolean, placeholder: String, model: String, }, computed: { computedtextInputProps(){ return justThePropsNeededForTheTextInput } } ... What I don't like is that the props are named-spaced with the key config, or any other arbitrary key. The text-input component ( not shown ) is a glorified input field that can take a number of attributes. I could flatten the props when the component is created, but is that generally a good idea?
I am surprised this question hasn't been asked before.
Thanks.
Edit: 10-06-2017