How to achieve communication between parent-child components through ref and $parent combined with defineExpose in vue3

Vue 3 Passedrefand$parentThe combination of use can be easily achievedCommunication between parent-child components. passref, the parent component can obtain a child component instance, call its methods or access its properties. By$parent, The child component can obtain an instance of the parent component, thereby implementing data transfer and method calls between the parent and child. At the same time, we can also usedefineExposeMethod to expose component properties to the outside for component calls. This article will explore these technical details in depth to help you better understand the communication mechanism between parent-child components in Vue 3.

1. Parent component obtains instances of child components through ref

Suppose we have a parent component Parent and a child component Child, and we need to communicate between them. It can be achieved through the following steps:

Use ref in the parent component to get an instance of the child component:

<template>
  <Child ref="childRef" />
</template>
<script setup>
  import Child from './';
  const childRef = ref(null);
  onMounted(() => {
    (); // Print subcomponent instance  });
</script>

Expose properties outward using defineExpose in child components:

<template>
  <div>{{ message }}</div>
</template>
<script setup>
  const message = ref('hello');
  defineExpose({
    getMessage() {
      return ;
    }
  });
</script>

Call the child component's method in the parent component to get the attribute:

<template>
  <Child ref="childRef" />
  <button @click="getChildMessage">Get child component properties</button>
</template>
<script setup>
  import Child from './';
  const childRef = ref(null);
  const getChildMessage = () => {
    (()); // Print the message attribute of the subcomponent  };
</script>

This enables communication between parent-child components.The attributes are exposed out of the child component through defineExpose. The parent component obtains the child component instance through ref, and then calls the child component's method to obtain the attributes。

2. The child component obtains the instance of the parent component through $parent

In Vue 3, we can use<script setup>syntax to write components, and can also be useddefineExposeto expose component properties to the outside.

Here is a simple example:

Parent component

<template>
  <child-component :msg="message"></child-component>
</template>
<script setup>
import ChildComponent from './'
const message = 'Hello, World!'
defineExpose({
  message
})
</script>

In this example, the parent componentParentComponentIntroduced subcomponentsChildComponent, and passed amsgproperty. exist<script setup>In, we defined amessagevariable, and passdefineExposeMethod to expose it. In this way, it can be passed in the subcomponent$parentAttributes get an instance of the parent component and accessmessageVariable is here.

Here is the code for the child component:

Subcomponents

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="handleClick($parent)">Click me!</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const handleClick = ($parent) => {
  // Access the message exposed to the parent component through $parent  ($)
}
const props = ['msg']
</script>

In subcomponents we userefA statementhandleClickMethod, in this method, it can be passed$parentThe property accesses the instance of the parent component and gets the exposed one of the parent component.messagevariable.

When communicating between parent and child components, it can actually be usedemitsandv-modelWhich method to use depends on the specific situation.

3. Summary

All in all, Vue 3 passedrefand$parentcombined use, anddefineExposeThe method can easily realize communication between parent-child components. In actual development, the rational use of these technologies can effectively improve the coupling between components, accelerate development efficiency, and to a certain extent improve the maintainability and readability of the code.

This is the article in vue3 on the communication between parent-child components through ref and $parent combined with defineExpose. For more related content of vue3 parent-child component communication, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!