How do you pass props to components in v2.0 ?

[MOSMekawy]

What i concluded is that the props of the component should be the same as the keys in the data. That's not convenient. is there any other way ?

[tangbc]

Thank your suggestion!

Now all the item props only come from data-sources, I think it's reasonable, Normally, we render a list corresponds to data array, just like v-for.

But from your question and this pr #177, and someone who ask me in email, it's really a problem I didn't take into consideration, and it's really not flexible enough.

So I come up an idea to solve it (adding a data-props prop):

The parent(root) component like that:

<template>
  <div>
    <virtual-list
      :data-key="'id'"
      :data-sources="items"
      :data-componnet="itemComponent"

      // adding data-props to pass a extra props.
      :data-props="{ otherValue1, otherValue2 }" 
    ></virtual-list>
  </div>
</template>

<script>
export default {
  name: 'root',
  data () {
    return {
      otherValue1: 'abc',
      otherValue2: 'xyz',
      
      itemComponent: Item,
      items: [{ id: '1', foo: 'xx'}, { id: '2', foo: 'yy'}],
    }
  }
}
</script>

And child(item) component like that:

<script>
export default {
  name: 'item-component',
  props: {
    // from data-props(parent data) special designation
    otherValue1: String,
    otherValue2: String,

    // from data-sources original array, here is: { id: '1', foo: 'xx'}
    source: Object
  }
}
</script>

What do you think this idea? Welcome to provide more ideas and suggestions. If it is acceptable, I will support and update into next version.

[Dagdelo]

I think this approach resolves the problem estated by @MOSMekawy. And, keeps the workflow reasonable simple.

[MOSMekawy]

@Dagdelo For now i solved the problem by creating a wrapper component that takes the data and passes them down to the component in the format it needs, preventing breaking changes through out the app. @tangbc thanks for your quick response.

[MOSMekawy]

@tangbc I read your reply a second time thoroughly and while this is helpful permitting providing props outside the list items but doesn't solve the problem of having to list all the keys in a list item in case of complex objects such as mentioned in pr #177 so if it's possible to pass the the whole object as prop to the child component this would be useful.

[tangbc]

@MOSMekawy In item component source is the whole object as prop to the child component form data-sources, if you want data-props also as an object, just assign an object:

<virtual-list
  :data-key="'id'"
  :data-sources="items"
  :data-componnet="itemComponent"

  // adding data-props to pass a extra props.
  :data-props="{ extraProp: { otherValue1, otherValue2 } }"
></virtual-list>

Maybe is usefull but I don't think it's flat enough, not convenient to make every prop type definition.

[tangbc]

I wonder if there's any way to keep props flat and also can unified it in a whole object.

[MOSMekawy]

I don't know about your underlying implementation but how about by default the whole object is passed down to child component unless the developer provides a some sort of a reducer function like in vue-router. For example

{ path: '/', component: home, props: route => { prop1: route.query.id, prop2: route.params.index } }

[tangbc]

Published v2.0.3

<template>
  <div>{{ source.text }} - {{ otherPropValue }}</div>
</template>
<script>
  export default {
    name: 'item-component',
    props: {
      source: { 
        type: Object,
        default () {
          return {}
        }
      },
      otherPropValue: String 
    }
  }
</script>