Some functions are common in development, and the logic is roughly the same. Things like this can be packaged into a component. The more commonly used ones are function package, component package, and component package. In our own way, parent-child components can be associated through some values. This method is what we call component value passing. vue3+ts component value passing is actually component value passing plus data type constraints, and there is no difference .
Here we mainly introduce the setup syntax sugar component passing value of vue3. Taking the delete function as an example, parent-child components mainly use defineProps and defineEmits to realize component passing value.

father to son

Here, the component is introduced by import custom component name from subcomponent path, just use <component name></component name> in the page
parent component

// The parent component introduces the child component and passes in the value of the parent component through the custom name
<DeleteGoods :father="userStatus" ></DeleteGoods>

<script setup lang="ts">
import { ref } from "vue"  
import DeleteGoods from '@/components/A_Component pass value/A components.vue'    // Import subcomponents

// the value of the parent component
const userStatus = ref('user')
</script>

Subassembly

<div class="deleteName">Subassembly A</div>

<script setup lang="ts">
import { ref,defineProps} from "vue" 
// Receive the value of the parent component through defineProps
const fatherElement = defineProps({
    // Receive the passed value. The father here is the custom name of the parent component 
    father:{   
        type:String,  // type of data
        default:"no value passed"  // Default value when no value is passed
    }
 })
 console.log(fatherElement.father)  // Print the value of the parent component: user
</script>

son to father

Subassembly

<div class="deleteName" @click="deleteGoods">Subassembly A</div>

<script setup lang="ts">
import { ref,defineEmits} from "vue" 

// Pass values ​​from child to parent in the form of an array, define the event defineEmits([custom name]) from child to parent
const emit = defineEmits(['deleteOutcome'])

// subcomponent value
const backStatus = ref<string>('back')

// delete
const deleteGoods = () => {
// Define a custom name and value through emit, deleteOutcome is the name, and {backStatus:backStatus.value} is the value
        emit('deleteOutcome',{backStatus:backStatus.value}) // Return deleteOutcome as a custom name
    }
}
</script>

parent component

// The parent component introduces the child component, and associates the child component with the custom name of @child component. valChange is a custom function. When the child component triggers the return deleteOutcome event, the valChange function will be called automatically
<DeleteGoods @deleteOutcome="valChange"></DeleteGoods>

<script setup lang="ts">
import { ref } from "vue"  
import DeleteGoods from '@/components/A_Component pass value/A components.vue'    // Import subcomponents

// The data type interface returned by the child component
interface IBackStatus {
    backStatus : string
}
// Subcomponent events come with val (custom) callback parameters, specify the data type here
const valChange = (val : IBackStatus ) => {
    console.log(val); // Get the value of the child component print user2
}
</script>

Component pass-by-value for multiple values

The above demonstrates the single value transfer of parent-child components, and the same is true for multiple value transfers. Just add a custom name or custom event to the component.
In fact, the value passing of the parent component only needs to define the value and receive the event that triggers the return of the child component. The rest does not need to be done, and more is done in the child component. The child component needs to receive the value and return of the parent component. Pass the value of the child component, as follows:
parent component

/*
:father="userStatus"   // father to son
:moreA="moreA"  // father to son
@moreB="moreB"   // son to father
@deleteOutcome="valChange"  // son to father
*/
<DeleteGoods 
:father="userStatus" 
:moreA="moreA" 
@moreB="moreB" 
@deleteOutcome="valChange"
>
</DeleteGoods>

// subcomponent events
interface IBackStatus {
    backStatus : string
}
const valChange = (val : IBackStatus) => {
    console.log(val); // Get the value of the child component
    userStatus.value = val.backStatus  // Change the value of the parent component
}

// Child component event 2
interface IBoreB {
    moreB : number
}
const moreB = (val : IBoreB) => {
    console.log(val); // the value of the child component
    moreA.value = val.moreB   // Change the value of the parent component
}

Subassembly

// Receive the value of the parent component
const fatherElement = defineProps({
    // Receive the passed value. The father here is the custom name of the parent component 
    father:{   
        type:String,  // type of data
        default:"no value passed"  // Default value when no value is passed
    },
    moreA:{   
        type:Number,  // type of data
        default:"no value passed"  // Default value when no value is passed
    }
 })

// Return the value of the child component
const emit = defineEmits(['deleteOutcome','moreB'])

const backStatus = ref<string>('back')

const deleteGoods = () => {
        emit('deleteOutcome',{backStatus:backStatus.value}) // return 
        emit('moreB',{moreB:200}) // return
    } 
}

need attention

• The data passed from the parent to the child is one-way bound and synchronous. When the value of the parent component changes, the value of the child component will also change at the same time. The child component cannot change the value passed from the parent component because it is read-only.
• The child component cannot directly manipulate the value of the parent component. It can only trigger the custom event of child-to-parent through child-to-parent, and change the value of the parent component in this event.
• After the child component returns, the custom event received by the parent component will be automatically triggered.
• In ts, you need to pay attention to the data type when the data is returned. If the data type of the parent and child components is inconsistent, an error will be reported.

For the value passing of sibling components, please see another article: vue3 syntactic sugar setup brother component pass value

Case source code: https://gitee.com/wang_fan_w/ts-seminar

If you think this article is helpful to you, please light up the star