父组件主动触发子组件方法的两种策略

在Vue.js开发中，父子组件间的通信是一个不可或缺的环节，它涵盖了数据传递以及方法调用等诸多方面。本文将介绍两种策略，帮助父组件主动触发子组件的方法，并实现通过子组件的方法将数据传递回父组件。

01父子组件间通信

父组件直接调用子组件的方法

在Vue.js中，父组件可以通过引用子组件来直接调用其方法。为此，我们可以在子组件上使用ref属性为其赋予一个唯一的ID，然后在父组件中通过this.$refs来访问该子组件的实例或元素。在Vue 2中，可以直接使用this.$refs.root来访问子组件，获取其参数或调用其方法。而在Vue 3中，需要先定义一个变量，并将其挂载到子组件的ref属性上，例如：

const root = ref(null);

// 在父组件内或子组件实例中定义挂载到子组件的ref属性变量

root.value.childEvent();

然而，值得注意的是，官方文档提醒我们：$refs在组件渲染完成后才生效，并且它们不是响应式的。因此，尽管我们可以使用它们来直接操作子组件，但应避免在模板或计算属性中访问它们。当我们需要从子组件向父组件传递数据时，应采用其他方式来实现。

在子组件内部，我们实现了一个名为childEvent的方法。这个方法通过context.emit触发一个事件，并传递一个包含name和age属性的对象到父组件。

在父组件中，我们通过ref属性引用了子组件，并定义了一个名为getData的方法来接收子组件传递的数据。当子组件触发update事件并传递数据时，父组件中的getData方法将被调用，并打印出接收到的数据。同时，我们还使用了一个testData的响应式引用变量来存储接收到的数据。

子组件主动监听父组件的props值

直接在父组件层面调用子组件的方法，并由子组件触发emit来传递数据，这种做法虽可实现功能，但从代码层面和思路层面来看，都并非最佳选择。因此，我们接下来探讨第二种思路。

这种思路与第一种存在显著差异：首先，父组件通过props向子组件传递一个布尔值，这个布尔值用于控制是否需要触发子组件的方法。在子组件内部，我们监听这个布尔值的变化，根据其值来决定是否调用相应的方法。

接下来，我们来看一个具体的实现例子。在Vue3中，父组件可以这样传递布尔值给子组件：

helloworld.vue:

msg="Hello Vue 3 in CodeSandbox!"

:emitEvent="'emitEvent'"

:getChildData="'getChildData'"

/>

然后，在子组件中，我们可以这样监听并使用这个布尔值：

import { ref } from 'vue'

export default {

  props: {

    emitEvent: {
      type: String,
      default: false,
    },
  },

  setup() {

    const triggerEvent = () => {
      if (emitEvent.value) {
        // 在这里调用相应的方法或触发事件等操作
      }
    }
    const getChildData = (val) => {
      console.log("data from child:", val)
      // 在这里处理从父组件传递过来的数据或触发其他操作等
    }
    return { triggerEvent, getChildData }
  },

}

在这个例子中，我们使用了Vue3的Composition API来定义组件的逻辑。通过props接收父组件传递的布尔值emitEvent，并在setup函数中根据其值来决定是否调用相应的方法。这样，我们就实现了子组件主动监听父组件props的值并调用相应方法的功能。

定义一个名为childEvent的方法，该方法通过context.emit触发一个名为"update"的事件，并传递一个名为testObject的对象作为参数。 使用watch来监听emitEvent的变化。当emitEvent的值为真时，执行相应的操作，例如在控制台打印"triggerEvent1"，并调用childEvent方法。

这两种思路都能实现父组件控制子组件方法调用的目的。然而，它们之间存在一些关键差异。第一种思路更直接，父组件在需要时直接通过子组件实例调用其方法。而第二种思路则更加解耦，父组件通过管理props的状态来间接控制子组件的行为，子组件则根据这些状态的变化来决定是否执行相应的方法。这种方式的优点在于父组件无需了解子组件的具体实现细节，只需关注状态的管理即可。

转载自：https://baijiahao.baidu.com/s?id=1834319046082585613&wfr=spider&for=pc，侵删