vue3 Parent child Component Value Transfer Details

It has been a long time since the birth of vue3, and the author has only recently started to learn vue3. Compared with vue2, vue3 has changed a lot in writing. The most typical example is that vue3 realizes data response through ref or reactive. Because of the appearance of ref and reactive, the value transfer mode of parent-child components in vue3 has also changed

Let's look at the writing in vue2 first

Parent component:

<!--  Parent component  -->
<template>
  <div>
    <children :title="title" @getChildren="getChildren"></children>
    <div> The subcomponent 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>

Subcomponents:

<!--  Subcomponent  -->
<template>
  <div>
    <div> The value passed from the parent component:  {{ title }}</div>
    <button @click="askToFather"> Click Send to 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>

In vue2, the value transfer from subcomponent to parent component is realized in the form of this. $emit, but this does not exist in vue3, and data and functions are encapsulated in setup in vue3, so how is vue3 realized?

We know that setup in vue3 receives two parameters, the first parameter is props, that is, the props value passed by the parent component to the child component, and the second value is context, which represents the current context object. After knowing this thing, we will now realize the parent-child value transfer of vue3

The father-to-son in vue3 and the father-to-son 1 in vue2 will not be described too much again, but the following focuses on the son-to-father in vue3

Parent component

<template>
  <div style="color: aqua"> Parent component </div>
  <div> The subcomponent said 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("") // ref The function of is to realize the responsive,   If not ref You cannot implement responsive expressions that reference data types with reactive ) 
    let listenToChildren = (val) => {
      children_msg.value = val //  Use ref Package data needs to be passed through .value Access his value in the form of 
    }
    return {
      msg,
      children_msg,
      listenToChildren,
    }
  },
})
</script>
<style></style>

Subcomponents:

<template>
  <div style="color: brown"> Subcomponent </div>
  <!--  Father-to-child usage and vue2 Same  -->
  <div> The value passed from the parent component is: {{ title }}</div>
  <button @click="sayToFather"> Speaking 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) {
    // context The function is to get the context object, 
    //  If setup It is written as setup(props, { emit }) The way, the following context Can be omitted 
    const sayToFather = () => {
      const ask = " I am a child component, and I speak to the parent component "
      context.emit("listen", ask)
    }
    return {
      sayToFather,
    }
  },
})
</script>
<style></style>

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!