当前位置：首页 > article >正文

Vue3：$refs和$parent实现组件通信

article 2024/9/24 19:03:55

在Vue3中，refs和refs和parent是用于组件间通信的重要机制

一.$refs

1.操作子组件数据

一旦获取到子组件的实例，父组件可以修改子组件暴露的变量值，实现父子组件间的直接数据交换。

2.批量处理子组件

$refs可以用于同时获取多个子组件的实例，从而一次性操作多个子组件的数据，这对于批量更新非常有用。

3.访问DOM元素

除了组件实例，$refs也可以用来获取原生DOM元素的引用，使得开发者可以直接操作DOM元素的属性和方法。

4.组合式API支持

在Vue3的组合式API中，虽然不能直接使用this关键字，但可以通过getCurrentInstance方法来间接获取$refs。

二.parent

1.访问父组件实例

$parent允许子组件直接访问其父组件的实例，这为子组件提供了一种方式来调用父组件的方法或修改父组件的数据。

2.破坏封装性

虽然$parent提供了强大的功能，但它也可能导致组件间的紧耦合，破坏了组件的封装性和复用性。因此，官方推荐使用props和自定义事件来实现父子组件间的通信。

3.defineExpose使用

在Vue3中，为了安全地暴露父组件的数据和方法给子组件，可以使用defineExpose宏，这是一种更可控且类型友好的方式。

4.限制使用场景

由于$parent可能导致代码难以维护和理解，它通常不建议作为首选的通信方式，特别是在大型应用中。

三.使用

1.父组件

2.子组件

四.代码

1.父组件代码

<template>
    <div class="father">
        <h4>父组件</h4>
	    <h4>父亲的房:{{ house }}</h4>
        <button @click="changeCar">修改子的车</button>
        <son ref="s"/>
    </div>
</template>

<script setup lang="ts" name="father">
    import { ref } from "vue";
    import son from "../components/son.vue";

    let s = ref()

    let house = ref('檀宫')

    function changeCar(){
        s.value.car = '奔驰'
    }
    
    //暴露属性
    defineExpose({house})
    
 
</script>


<style scoped>
.father{
    background-color: orange;
}
h4{
    margin-left: 20px;
    font-size: 20px;
}

</style>

2.子组件代码

<template>
    <div class="son">
        <h4>子组件</h4>
        <h4>子的汽车:{{ car }}</h4>
        <button @click="changeHouse($parent)">传输数据给父</button>
    </div>
</template>
    
<script setup lang="ts" name="father">
    import { ref } from "vue";
    let car = ref('宝马')
    
    function changeHouse(parent:any){
        parent.house = '汤臣一品'
    }

    defineExpose({car})
    
  
</script>
    
    

<style scoped>
.son{
    background-color: skyblue;
}
h4{
    margin-left: 20px;
    font-size: 20px;
}

</style>