This page looks best with JavaScript enabled

Accept Multiple Props in a Vue Component

 ·   ·  ☕ 1 min read

Vue enables you to define more than one prop against a component.

See which component communication is effective and how props compare to Vuex

Defining prop in a component is simple enough -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- Target.vue -->
<template>
  {{ tinyInput }}
  <!-- display the prop -->
</template>

<script>
  export default {
    props: {
      tinyInput: {
        type: String,
        required: false
      }
    }
  };
</script>

Just include additional prop to Target to accept more than one prop -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!-- Target.vue -->
<template>
  {{ tinyInput }} {{ tinierIn }}
  <!-- display the prop -->
</template>

<script>
  export default {
    props: {
      tinyInput: {
        type: String,
        required: false
      },
      tinierIn: {
        type: String,
        required: false
      }
    }
  };
</script>

To do the same without using a single file component -

1
2
3
4
Vue.component("Target", {
  props: ["tinyInput", "tinierIn"],
  template: "<p>{{ tinyInput }} {{ tinierIn }}</p>"
});
Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things