Accept Multiple Props in a Vue Component

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 -

<!-- 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 -

<!-- 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 -

Vue.component("Target", {
  props: ["tinyInput", "tinierIn"],
  template: "<p>{{ tinyInput }} {{ tinierIn }}</p>"
});
comments powered by Disqus