子组件按钮事件绑定到父组件：实现按钮点击事件传递

2024-03-22 19:42:58

子组件按钮事件绑定到父组件：详尽指南

在开发复杂应用程序时，我们需要跨组件通信，以便将子组件的事件传递到父组件。这篇文章将提供一个详细的分步指南，教你如何使用 Vue.js 的事件处理程序实现子组件按钮事件到父组件的绑定。

场景概述

假设我们有一个名为 NotifDimsToLSRIncomformability 的子组件，其中包含一个按钮。该子组件被托管在父组件中，我们希望在父组件中监听子组件按钮的点击事件，并在按钮被点击时触发某些副作用。

误区：使用 v-model

最初，我们尝试使用 v-model 指令将子组件按钮绑定到父组件，如下所示：

**父组件** 

<NotifDimsToLSRIncomformability
    v-bind:showNotifDimsToLSRIncomformability="showNotifDimsToLSRIncomformability"
    v-model:vModel="vModel"
></NotifDimsToLSRIncomformability>

**子组件按钮** 

<cds-button 
    class="clsBtnClosePosition"
    action="primary"
    status="primary"
    size="md"
    type="button"
    v-model="vModel"
    @click="onCloseNotification()"
> X
</cds-button>

但是，这种方法不起作用。

正确方法：使用事件处理程序

为了在父组件中监听子组件按钮的点击事件，我们需要使用事件处理程序，如下所示：

**父组件** 

<NotifDimsToLSRIncomformability
    v-bind:showNotifDimsToLSRIncomformability="showNotifDimsToLSRIncomformability"
    @click="onChildButtonEvent"
></NotifDimsToLSRIncomformability>

**子组件按钮** 

<cds-button 
    class="clsBtnClosePosition"
    action="primary"
    status="primary"
    size="md"
    type="button"
    @click="onChildButtonEvent"
> X
</cds-button>

在父组件中，我们需要定义 onChildButtonEvent 方法来处理子组件按钮的点击事件。

代码示例

父组件

<template>
  <NotifDimsToLSRIncomformability
    v-bind:showNotifDimsToLSRIncomformability="showNotifDimsToLSRIncomformability"
    @click="onChildButtonEvent"
  ></NotifDimsToLSRIncomformability>
</template>

<script>
  export default {
    data() {
      return {
        showNotifDimsToLSRIncomformability: false,
      };
    },
    methods: {
      onChildButtonEvent() {
        // 处理子组件按钮点击事件
      },
    },
  };
</script>

子组件

<template>
  <cds-button
    class="clsBtnClosePosition"
    action="primary"
    status="primary"
    size="md"
    type="button"
    @click="onChildButtonEvent"
  >
    X
  </cds-button>
</template>

<script>
  export default {
    methods: {
      onChildButtonEvent() {
        // 发出事件，父组件将侦听该事件
        this.$emit('click');
      },
    },
  };
</script>