如何判断父画面的方法是由哪个子画面调用的？

Z时代
2024-02-16
分类：IT

父组件有多个子组件，在父组件定义一个方法，子组件都可以调用。假如现在父组件的方法被调用了一次，怎么判断此时是哪个子组件在调用？

回答：

父组件的方法加个参数，子组件调用的时候把子组件名字传过去，然后在父组件的方法里打印出来就能看到了。

回答：

<!-- 父组件 -->
<template>
  <div>
    <child-component v-for="index in 3" :key="index" @call-parent="handleCallParent"></child-component>
  </div>
</template>
<script>
import ChildComponent from 'ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCallParent(childName) {
      console.log(`子组件 ${childName} 调用了父组件的方法`);
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('call-parent', '子组件A');
    },
  },
};
</script>

父组件中渲染了三个 ChildComponent 组件，并为每个组件绑定了一个 call-parent 事件监听器，该监听器会在子组件调用 $emit 方法时触发。在子组件中，当点击按钮时，会调用 handleClick 方法，该方法通过 $emit 方法触发了 call-parent 事件，并将子组件的标识作为参数传递给父组件。在父组件中，定义了一个名为 handleCallParent 的方法，该方法会在子组件触发 call-parent 事件时被调用