vue3组件通信（6）——$refs 和 $parent

概述：$refs  父传子   $parent   子传父

$refs  父传子

1.ref标记子组件

//在父组件中

//模板中引入子组件 并给子组件标记ref
<child1 ref="c1"/>
<Child2 ref="c2"/>

//脚本文件中定义好ref
import Child1 from "./child1.vue";
import Child2 from "./child2.vue";
import {ref} from "vue";

// 定义两个ref标识，标识两个孩子
let c1 = ref()
let c2 = ref()

2.父组件通过$refs获取所有被标记的子组件

<button @click="chargeallbook($refs)">改变所有孩子的书</button>

 $refs是包含多个被ref标记的组件列表，遍历列表可以操作每个子组件；

3.子组件默认暴露自己的数据  defineExpose({暴露的数据名})

// 将本组件数据对外暴露  父组件可以摸到子组件的数据
defineExpose({toy,book})

4.父组件遍历ref标记的子组件拿到数据

function chargeallbook(refs:object) {
  console.log(refs)
  // 遍历每个被ref标记的组件
  for(let key in refs){
    // 统一操作每个组件的book数据
    console.log(refs[key].book)
    refs[key].book+=3
  }
}

 父组件摸到每个子组件的book数据，点击 按钮绑定的chargeallbook方法将修改每个子组件下的book数据；

$parent   子传父

1.子组件通过$parent摸到父组件

<button @click="subroom($parent)">干掉父亲一套房产</button>

 $parent类比$refs，是子组件拿父组件的方法；

2.父组件默认暴露（选择性的暴露）子组件需要用到的数据

defineExpose({room})

3.子组件摸到父组件数据

function subroom(parent){
  console.log(parent,parent.room)
  parent.room-=1
}