vue3组件通信--$refs和$parent

1.通过ref更改子组件的数据

父组件FatherComponent.vue:

<script setup>
import ChildComponent from "@/components/ChildComponent.vue"
import ChildComponent2 from "@/components/ChildComponent2.vue"
import { ref } from "vue"

const house = ref('4')
const child1 = ref()
const child2 = ref()

const changeToy = () => {
  child1.value.toy = '汽车'
}

const changeToy2 =()=>{
  child2.value.computer = '华为'
}
</script>

<template>
  <div class="bg-grey h-100 w-100">
    <h1 class="text-center mt-5">父组件</h1>
    <h3>父亲的房产：{{house}} 套</h3>
    <v-btn @click="changeToy" class="mr-5">修改子组件1的玩具</v-btn>
    <v-btn @click="changeToy2">修改子组件2的笔记本</v-btn>

    <ChildComponent ref="child1"></ChildComponent>
    <ChildComponent2 ref="child2"></ChildComponent2>
  </div>
</template>

可以通过这里的 <ChildComponent ref="child1"></ChildComponent> <ChildComponent2 ref="child2"></ChildComponent2>，ref="child1"和ref="child2"，父组件可以得到子组件实例对象。但是子组件需要通过defineExpose({ toy, book })把自己的数据暴露出去。

子组件ChildComponent.vue:

<script setup>
import { ref } from 'vue'

const toy = ref('奥特曼')
const book = ref('3')

//暴露子组件的数据
defineExpose({ toy, book })
</script>

<template>
  <div class="bg-purple h-50 w-75 ma-auto mt-5">
    <h1 class="text-center">子组件1</h1>
    <h3>子组件1的玩具：{{toy}}</h3>
    <h3>子组件1的书籍：{{book}}本</h3>
  </div>
</template>

子组件ChildComponent2.vue:

<script setup>
import { ref } from 'vue'

const computer = ref('联想')
const book = ref('6')

defineExpose({computer, book})
</script>

<template>
  <div class="bg-blue h-25 w-75 ma-auto">
    <h1 class="text-center">子组件2</h1>
    <h3>子组件1的笔记本：{{computer}}</h3>
    <h3>子组件1的书籍：{{book}}本</h3>
  </div>
</template>

2.通过$refs获取所有的子组件实例对象

父组件FatherComponent.vue:

<script setup>
import ChildComponent from "@/components/ChildComponent.vue"
import ChildComponent2 from "@/components/ChildComponent2.vue"
import { ref } from "vue"

const house = ref('4')
const child1 = ref()
const child2 = ref()

const changeToy = () => {
  child1.value.toy = '汽车'
}

const changeToy2 =()=>{
  child2.value.computer = '华为'
}

const getAllChild = (value)=>{
  value.child1.book += 6
  value.child2.book += 4
}
</script>

<template>
  <div class="bg-grey h-100 w-100">
    <h1 class="text-center mt-5">父组件</h1>
    <h3>父亲的房产：{{house}} 套</h3>
    <v-btn @click="changeToy" class="mr-5 text-black">修改子组件1的玩具</v-btn>
    <v-btn @click="changeToy2" class="mr-5 text-black">修改子组件2的笔记本</v-btn>
    <v-btn @click="getAllChild($refs)" class="mr-5 text-black">获取所有的子组件实例对象</v-btn>

    <ChildComponent ref="child1"></ChildComponent>
    <ChildComponent2 ref="child2"></ChildComponent2>
  </div>
</template>

父组件可以通过<v-btn @click="getAllChild($refs)" class="mr-5">获取所有的子组件实例对象</v-btn>获取所有的子组件实例对象。

3.通过$parent更改父亲的数据

父组件FatherComponent.vue:

<script setup>
import ChildComponent from "@/components/ChildComponent.vue"
import ChildComponent2 from "@/components/ChildComponent2.vue"
import { ref } from "vue"

const house = ref('4')
const child1 = ref()
const child2 = ref()

const changeToy = () => {
  child1.value.toy = '汽车'
}

const changeToy2 =()=>{
  child2.value.computer = '华为'
}

const getAllChild = (value)=>{
  value.child1.book += 6
  value.child2.book += 4
}

//父亲把自己的属性暴露出去
defineExpose({house})
</script>

<template>
  <div class="bg-grey h-100 w-100">
    <h1 class="text-center mt-5">父组件</h1>
    <h3>父亲的房产：{{house}} 套</h3>
    <v-btn @click="changeToy" class="mr-5 text-black">修改子组件1的玩具</v-btn>
    <v-btn @click="changeToy2" class="mr-5 text-black">修改子组件2的笔记本</v-btn>
    <v-btn @click="getAllChild($refs)" class="mr-5 text-black">获取所有的子组件实例对象</v-btn>

    <ChildComponent ref="child1"></ChildComponent>
    <ChildComponent2 ref="child2"></ChildComponent2>
  </div>
</template>

父亲需要把自己的属性通过defineExpose({house})，这样子组件才能更给父组件的数据。

子组件ChildComponent.vue:

<script setup>
import { ref } from 'vue'

const toy = ref('奥特曼')
const book = ref(3)

//暴露子组件的数据
defineExpose({ toy, book })

const minusFatherHouse = (value) => {
  value.house -= 1
}
</script>

<template>
  <div class="bg-purple h-50 w-75 ma-auto mt-5">
    <h1 class="text-center">子组件1</h1>
    <h3>子组件1的玩具：{{toy}}</h3>
    <h3>子组件1的书籍：{{book}}本</h3>
    <v-btn @click="minusFatherHouse($parent)" class="text-black">减少父亲的房产</v-btn>
  </div>
</template>

4.效果图