父级组件
<template>
<div class="parent bg-green-500 p-5 text-3xl">
<div>Parent - 这里是父元素</div>
<!-- title 为子组件定义的属性, @change 是子组件定义的事件名称 -->
<Children title="来自父元素Title" @change="parentEvent">content</Children>
</div>
</template>
<script setup>
import Children from "./Children.vue";
const parentEvent = (val) => {
console.log("Parent Event");
console.log(val);
};
</script>
<style scoped>
.parent {
width: 500px;
}
</style>
子组件
<template>
<div class="bg-blue-500 h-40 p-5">
<!-- 子组件自定义事件名称 -->
<div @click="childrenEvent">Children - {{ props.title }}</div>
<slot></slot>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({ title: String });
const emits = defineEmits(["change"]);
const childrenEvent = () => {
emits("change", 1);
};
</script>
<style scoped></style>