Skip to main content

Component Interaction

Parent component​

<script setup>
	import Son from './son-com.vue'
</script>

<template>
	<Son message="this is app message"/>
</template>

Subcomponent​

<script setup>
	const props = defineProps({
		message: String
	})
</script>

<template>
	{{ message }}
</template>
const props = defineProps({
    id:{
        type:String,
        default:''
    }
})

Subcomponent Emit​

Parent component

<script setup>
	import Son from './son-com.vue'
	const getMessage = (msg) => {
		console.log(msg)
	}
</script>

<template>
	<Son @get-message="getMessage"/>
</template>

Subcomponent

<script setup>
	const emit = defineEmits(['get-message'])
	
	const sendMsg = () => {
		emit('get-message','this is son msg')
	}
</script>

<template>
	<button @clikc="sendMsg">sendMsg</button>
</template>
0%