// 父組件
<template>
? <div class="about">
? ? {{fatherData}}
? ? <!-- 父傳子 -->
? ? <!-- 1、 在父組件的子組件標(biāo)簽上通過 :傳遞到子組件的數(shù)據(jù)名="需要傳遞的數(shù)據(jù)" -->
? ? <children :sonData="fatherData"></children>
? </div>
</template>
?
<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
? components:{
? ? children,
? },
name:"about",
setup(){
? const state = reactive({
? ? fatherData:"hello"
? })
? return {
? ? ...toRefs(state)
? }
}
?
})
</script>

// 子組件
<template>
? <div class="children">
? ? <!-- 3、在子組件模版中使用 -->
? ? {{sonData}}
? </div>
</template>
<script>
export default {
name:"Children",
// 2、子組件通過 props 來接收
? props:["sonData"],
? setup(props){
? ? function childrenbut(){
? ? ? // props.sonData ?可以訪問到父組件傳遞的數(shù)據(jù)
? ? ? console.log(props.sonData);
? ? }
? ? return {
? ? ? childrenbut
? ? }
? }
}
</script>

// 子組件
<template>
? <div class="children">
? ? {{sonData}}
? ? <!-- 1、觸發(fā)事件 -->
? ? <button @click="childrenbut">子組件按鈕</button>
? </div>
</template>
<script>
export default {
name:"Children",
? setup(props,context){
? ? function childrenbut(){
? ? ? console.log(context);
? ? ? // 2、通過context.emit 實(shí)現(xiàn)子傳父
? ? ? // 第一個(gè)參數(shù)為 方法名，第二個(gè)參數(shù)為 需要傳遞的數(shù)據(jù)
? ? ? context.emit("change",'world')
? ? }
? ? return {
? ? ? childrenbut,
? ? }
? }
}
</script>

// 子組件
<script>
export default {
name:"Children",
? // 通過結(jié)構(gòu) 之后直接寫 emit {emit}
? setup(props,{emit}){
? ? function childrenbut(){
? ? ? // 省去 context.emit
? ? ? emit("change",'world')
? ? }
? ? return {
? ? ? childrenbut,
? ? }
? }
}
</script>