Detailed explanation of value transfer between parent and child components in Vue3

<!-- Parent component -->
<template>
  <div>
    <children :title="title" @getChildren="getChildren"></children>
    <div>Child component says: {{ childrenAsk }}</div>
  </div>
</template>
 
<script>
  import children from "./children.vue"
  export default {
    data() {
      return {
        title: "I am the value passed from the parent component",
        childrenAsk: ""
      }
    },
    methods: {
      getChildren(val) {
        this.childrenAsk = val
      }
    }
  }
</script>

<!-- Child Component -->
<template>
  <div>
    <div>Value passed from the parent component: {{ title }}</div>
    <button @click="askToFather">Click to send to the parent component</button>
  </div>
</template>
<script>
  export default {
    props: {
      title:
        type: String
      }
    },
    data() {
      return {
        askMsg: "This is what I said to the parent component"
      }
    },
    methods: {
      askToFather() {
        this.$emit("getChildren", this.askMsg)
      }
    }
  }
</script>

<template>
  <div style="color: aqua">Parent component</div>
  <div>The child component says to me: {{ children_msg }}</div>
  <children :title="msg" @listen="listenToChildren"></children>
  {{ value }}
</template>
<script lang="ts">
import children from "@/views/component_emit/children.vue"
import { defineComponent, ref } from "vue"
export default defineComponent({
  components:
    children,
  },
  name: "father",
  setup() {
    let msg = "I am the parent component"
    let children_msg = ref("") // The function of ref is to implement responsiveness. If there is no ref, responsiveness cannot be implemented (reference data types use reactive)
    let listenToChildren = (val) => {
      children_msg.value = val // To use data wrapped by ref, you need to access its value in the form of .value}
    return {
      msg,
      children_msg,
      listenToChildren,
    }
  },
})
</script>
<style></style>

<template>
  <div style="color: brown">Subcomponents</div>
  <!-- The method of parent-child transmission is the same as vue2-->
  <div>The value passed from the parent component is: {{ title }}</div>
  <button @click="sayToFather">Speak to the parent component</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: "children",
  props: {
    title:
      type: String,
    },
  },
  setup(props, context) {
    // The purpose of context is to obtain the context object.
    // If setup is written as setup(props, { emit }), the following context can be omitted const sayToFather = () => {
      const ask = "I am a child component, I talk to the parent component"
      context.emit("listen", ask)
    }
    return {
      sayToFather,
    }
  },
})
</script>
<style></style>