A brief discussion on Vue3 father-son value transfer

// Parent component <template>
  <div class="about">
    {{fatherData}}
    <!-- From father to son-->
    <!-- 1. In the subcomponent tag of the parent component, pass: the data name passed to the subcomponent = "data to be passed" -->
    <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>

// Subcomponent <template>
  <div class="children">
    <!-- 3. Use in subcomponent templates-->
    {{sonData}}
  </div>
</template>
<script>
export default {
name:"Children",
// 2. The subcomponent receives props through props:["sonData"],
  setup(props){
    function childrenbut(){
      // props.sonData can access the data passed by the parent component console.log(props.sonData);
    }
    return {
      childrenbut
    }
  }
}
</script>

// Subcomponent <template>
  <div class="children">
    {{sonData}}
    <!-- 1. Trigger event-->
    <button @click="childrenbut">Child component button</button>
  </div>
</template>
<script>
export default {
name:"Children",
  setup(props,context){
    function childrenbut(){
      console.log(context);
      // 2. Use context.emit to pass data from child to parent. // The first parameter is the method name, and the second parameter is the data to be passed. context.emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

// Subcomponent <script>
export default {
name:"Children",
  // After passing the structure, write emit directly {emit}
  setup(props,{emit}){
    function childrenbut(){
      // Omit context.emit
      emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>