父组件中
<template>
<HelloWorld msg="父传子" hh="清华大学" @childTestClick="childTestClick">
</template>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "father",
components: {
HelloWorld,
},
setup() {
//父组件接收子组件事件
const childTestClick = (value) => {
console.log(value);
};
return { childTestClick };
},
};
子组件中
<template>
<div>接收父组件传递的值:{
{ msg }}---{
{ hh }}</div>
<button @click="clickChild">子組件事件</button>
</template>
export default {
name: "son",
//父传子接收
props: ["msg", "hh"],
//子传父触发emit事件声明
emits: ["childTestClick"],
setup(props, context) {
//子传父触发emit事件
const clickChild = () => {
context.emit("childTestClick", "子組件传值给父组件");
};
return { clickChild };
},
};