Vue3子组件如何调父组件方法？让代码轻灵飞扬

前端

2022-12-13 18:01:54

Vue3 中子组件如何与父组件通信：方法传递与事件触发

在 Vue3 中，子组件需要与父组件通信以共享数据和触发事件。为此，有两种主要方法：方法传递和事件触发。本文将深入探讨这两种方法，展示它们是如何工作的，并提供实际示例代码。

方法传递

什么是方法传递？

方法传递是一种将父组件的方法作为 props 传递给子组件的技术。这样，子组件就可以直接调用父组件的方法，就像它们是子组件自己的方法一样。

方法传递是如何工作的？

在父组件中定义方法： 在父组件的 methods 对象中定义需要传递给子组件的方法。
将方法作为 props 传递： 使用冒号语法将方法作为 props 传递给子组件，例如：<ChildComponent :my-method="myMethod" />。
在子组件中调用方法： 在子组件中，可以使用 this.myMethod() 直接调用父组件传递的方法。

代码示例

// 父组件
<template>
  <ChildComponent :my-method="myMethod" />
</template>
<script>
export default {
  methods: {
    myMethod() {
      console.log('Hello from parent!');
    }
  }
};
</script>

// 子组件
<template>
  <button @click="callParentMethod">Call Parent Method</button>
</template>
<script>
export default {
  props: ['myMethod'],
  methods: {
    callParentMethod() {
      this.myMethod();
    }
  }
};
</script>

事件触发

什么是事件触发？

事件触发是一种子组件向父组件发送事件的技术。父组件监听这些事件，并在触发时执行相应的处理函数。

事件触发是如何工作的？

在子组件中触发事件： 使用 this.emit() 方法在子组件中触发一个自定义事件，例如：`this.emit('my-event')`。
在父组件中监听事件： 在父组件中，使用 v-on 指令监听子组件触发的事件，例如：<ChildComponent @my-event="handleEvent" />。
定义处理函数： 在父组件的 methods 对象中定义一个处理函数来处理事件，例如：handleEvent()。

代码示例

// 子组件
<template>
  <button @click="emitEvent">Emit Event</button>
</template>
<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('my-event');
    }
  }
};
</script>

// 父组件
<template>
  <ChildComponent @my-event="handleEvent" />
</template>
<script>
export default {
  methods: {
    handleEvent() {
      console.log('Event received from child!');
    }
  }
};
</script>