11.（vue3.x+vite）组件间通信方式之ref与$parent、$children

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

注：
（1）ref 加在标签（div等）上，是拿到dom 对象
（2）ref加上组件上，拿到的是组件的引用
（3）让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露，另外让父组件获取子组件的数据或者方法需要通过defineExpose方法对外暴露。因为vue3中组件内部的数据对外“关闭的”，外部不能访问。
（4）$children在vue3已不再使用

父组件代码：

<template>
  <div>
    <div