父组件 parent.vue
<template>
<!-- 引入子组件 自定义了parentsEmit方法和pData属性-->
<children @parentsEmit="pEmitData" :pData="pData"></children>
我是父组件
我是子组件传过来:{{num}}
</template>
<script>
import { ref } from 'vue'
setup(){
let pData="我是父组件"
//接收子组件传过来的值
let num=ref(null)
const pEmitData=(data)=>{
num.value=data
}
return{
pData,
num,
pEmitData
}
}
</script>
子组件 children.vue
<template>
<p>我是父组件传过来的:{{cData}}</p>
我是子组件
<button @click="cEmitData">点我父组件加1</button>
</template>
<script>
props:{
pData:{
type:"String",
default:""
}
}
setup(props,context){
//接收父组件传过来的值pData
const cData=props.pData
const cEmitData=()=>{
//给父组件传值
context.emit('parentsEmit',1)
}
return{
cData,
cEmitData
}
}
</script>