## index.vue
<template>I'm the parent component<p>{{ str}}</p>
</template>
<script setup>
import Child from "./";
import { ref } from "vue";
const str= ref(""); // Value passed from child component
// Custom events for components
const childChange = (val) => {
str.value = val;
};
</script>
-----------------------------------Dividing line---------------------------------------------------
## Child.vue
<template>I'm a child component<el-button @click="handleClick">Click me to trigger a custom event</el-button>
</template>
<script setup>
// Use defineEmits to declare emits
const emit = defineEmits(["change"]);
const handleClick = () => {
// It must be declared through defineEmits, otherwise the method will be invalid!
emit("change", "I'm a value passed through a custom method");
};
});
</script>
