11. (vue3.x+vite) Communication methods between components: ref, $parent, $children

Front-end technology community general directory (please check this blog before subscribing)

Example effect

Note:
(1) If ref is added to a tag (div, etc.), it will get the dom object.
(2) If ref is added to the component, it will get the reference of the component.
(3) Let the parent component obtain the data or method needs of the child component. It is exposed to the outside through defineExpose. In addition, for the parent component to obtain the data or methods of the child component, it needs to be exposed to the outside through the defineExpose method. Because the data inside the component in Vue3 is "closed" to the outside world and cannot be accessed by the outside world.
(4) $children is no longer used in vue3

Parent component code:

<template>
  <div>
    <div