vue2: is possible to pass multiple props to component?

Question

i find no documentation online or examples, but which is the correct way to pass multiple props to component?

here what i have tried:

in HTML

<component:prop1="data1" :prop2="data2"></component>

in component.js

props: ['prop1','prop2'],

but obiusly don't work...

Answer 1

despite this been a little old, I'd like to contribute. If you want to pass a bunch of propeties "at once" together you could use "v-bind"

Let's say your component has a bunch of props:

props: ['age', 'year', 'date']

Instead the regular way below:

<MyAwesomeComponent :age="age" :year='year' :date='today' />

It's also possible to do:

<MyAwesomeComponent v-bind="groupedProps" />

been "groupedProps" the following object:

groupedProps: {age:134, year:2153, today: new Date()}

...v-bind="groupedProps"...

the behavior is described in the vue docs here

Answer 2

You can pass multiple props to components like this. In parent component:

 <template>
   <div id="app">
     <child-component :propA=propa :propB=propb></child-component2>
   </div>
 </template>

 <script>
 import ChildComponent from './components/comp2'
 export default {
   name: 'app',
   components: {
     ChildComponent
   },
   data () {
     return {
       propa : 65,
       propb : 'Nitin'
     }
   }
 }
 </script>

 <style></style>

In child component:

 <template>
   <div>
     {{propA}}
     {{propB}}
   </div>
 </template>

 <script>
 export default {
   props: {
     propA: Number,
     propB: String
   }

 }
 </script>

 <style lang="css">
 </style>

Reference:
Vue Prop-Validation

EDIT:
More info and example references can be found at:
Passing-Data-to-Child-Components-with-Props