1. Father sends message to son
Remember to like it if it is useful to you~
The parent component sends information to the child component
index.vue
import Back from '@/components/common/back.vue'
const title = ref('你好呀')
// template部分
<Back :title="title" />
Child components receive parent component information
/components/common/back.vue
<script setup>
import {
toRefs } from 'vue'
const props = defineProps({
title: {
type: String,
default: '标题',
required: true,
},
})
const {
title } = toRefs(props)
</script>
<template>
<span>{
{
title }}</span>
</template>
2. The son sends a message to the father
The child component sends information to the parent component
/components/relax/relax-index.vue
const emit = defineEmits(['goTreeHode'])
const goHold = () => {
emit('goTreeHode', true)
}
//template
<button @click="goHold">传值</button>
The parent component receives the child component information
relax.vue
import RelaxIndex from '@/components/relax/relax-index.vue'
//template
<RelaxIndex @goTreeHode="goTreeHode" />