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>"
});