Passing data from a parent component to a child component is something I need help with. Let's say I have a parent component with the following data:
Parent component
<template>
<NameUser :data="userData"></NameUser>
<div>first name: {{ userData.firstName }}</div>
<div>last name: {{ userData.lastName }}</div>
</template>
<script setup>
import {ref} from 'vue'
import NameUser from '../components/NameUser.vue';
const userData = ref({
firstName: 'testName',
lastName: 'testLastName'
})
</script>
The child component will receive this data and then send it back to the parent component once modified.
Child component
<template>
<label>First name</label>
<input :value="data.firstName" @input="changeData">
<label>Last name</label>
<input :value="data.lastName" @input="changeData">
</template>
<script setup>
const props = defineProps({
data:Object
})
function changeData(){}
</script>
I would appreciate assistance in implementing the changeData function. Additionally, guidance on whether using a computed property to prevent re-rendering is necessary would be helpful.