Question

如果我也单击了插槽内的Button，我想忽略从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>

如果您有一个自定义组件而不点击发出。您还需要添加.native：

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

Answer 2

第一次单击时，添加修饰符self

<DataTable @click.self="handleRowClick">

在Vue中单击插槽子组件时，忽略父组件的发出

2 个答案: