Exploring the capabilities of Vue3's Dynamic Component <component>, I am currently working with this setup:
Component 1:
<template>
<div>
<h1> Name Input: </h2>
<Input :model="props.name" />
<p> {{props.example}} </p>
</div>
</template>
<script>
export default{
props:["props"]
}
</script>
Main File
<template>
<div>
<component :is='active.page' :props='active.props' />
</div>
</template>
<script>
import UserName from 'components/UserName.vue'
export default{
components: { UserName }
setup() {
const active = { page: 'UserName', props: { name: null, example: 'Dave' } }
return {active}
}
}
In due time, there will be multiple pages for user navigation using a <Button />; my question is:
Can the modified prop name be sent back to the Main File after changes are made in Component 1?
This is essential for passing it to subsequent pages within <component> for display when moving to the next screen.
I appreciate your assistance.