Vue中點擊槽子組件時忽略父組件的發射

Question

如果我還單擊了插槽內的按鈕，我想忽略單擊 DataTable 行的發射。 我已經看到使用@click.prevent使用本機組件完成此操作。 不知道如何讓它與 Vue 組件和發射器一起工作。

<template>
<DataTable @click="handleRowClick">
  <template v-slot:action="{ row }">
    <Button @click="handleButtonClick">
      Button
    </Button>
  </template>
</DataTable>
</template>
<script>
export default {
  components: {
    DataTable,
    Button
  },
  methods: {
    handleRowClick(){
      console.log("Only the table row has been clicked, redirect");
    },
    handleButtonClick(){
      console.log("Button inside table component slot has been clicked, do something but don't redirect");
    }
  }
}
</script>

Answer 1

使用@click.stop ：

<Button @click.stop="handleButtonClick">
  Button
</Button>

如果您有一個沒有單擊發射的自定義組件。 你也需要 add.native ：

<Button @click.native.stop="handleButtonClick">
  Button
</Button>

Answer 2

在您第一次單擊時添加修飾符self

<DataTable @click.self="handleRowClick">