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