组件内如何轻松实现父组件与子组件间通信？

前端

2022-12-21 01:59:52

组件间通信：通过 getCurrentInstance 方法掌控 Vue.js

一、前言

在 Vue.js 应用中，组件扮演着组织和复用代码的关键角色。而组件间的有效通信对于构建复杂且易于维护的应用程序至关重要。Vue.js 提供了多种实现组件间通信的方法，其中之一便是利用 getCurrentInstance 方法。

二、getCurrentInstance 方法简介

getCurrentInstance 方法于 Vue.js 3.2.0 版本中引入，允许您在组件内部访问当前组件实例。这意味着您可以直接操作当前组件的属性、方法和插槽，从而实现组件之间的通信和数据传递。

三、使用 getCurrentInstance 方法实现组件间通信

1. 获取父组件实例

在子组件中，使用 getCurrentInstance 方法可以获取当前组件实例，然后通过实例上的 proxy 对象访问父组件。

<template>
  <div>
    <p>{{ parentMessage }}</p>
    <button @click="changeParentMessage">Change Parent Message</button>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();
    const parentMessage = instance.proxy.$parent.message;

    function changeParentMessage() {
      instance.proxy.$parent.message = 'New Message';
    }

    return {
      parentMessage,
      changeParentMessage,
    };
  },
};
</script>

2. 获取子组件实例

在父组件中，使用 ref 属性可以获取子组件实例，然后通过实例上的 proxy 对象访问子组件。

<template>
  <div>
    <child-component ref="childComponent" />
    <button @click="changeChildMessage">Change Child Message</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childComponent = ref(null);

    function changeChildMessage() {
      childComponent.value.message = 'New Message';
    }

    return {
      childComponent,
      changeChildMessage,
    };
  },
};
</script>