使用 btable 将事件传输到父组件

Question

我正在使用laravel(也许这个问题并不重要(，带有vue和bootstrap-vue。

我有一个模型Subnet，我创建了一个名为SubnetTable的 vue 组件，该组件显示了一个表格，每个subnets都有一行。 在每个按钮中都显示一个删除按钮，该按钮启动一个模式以确认子网的删除(另一个称为ModalDeleteSubnet的自定义组件(。

我试图将模态确认的结果发送到SubnetTable组件，但它不起作用。我意识到SubnetTable不是ModalDeleteSubnet的父母：

根 -> 子网表 -> BTable -> BTBody -> BTableCell -> ModalDeleteSubnet

所以，我想不可能让发射以这种方式工作......

使用 vue 创建这样的东西(我认为很常见(的正确方法是什么：一个带有更新表数据的操作按钮的表？

希望我已经解释了。对不起我的英语。

子网表

<template>
<div>
<b-card class="text-center">            
<b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
<template slot="[ip_address]" slot-scope="data_subnets">
<b>{{ long2ip(data_subnets.item.ip_address) }}</b>
</template>
<template slot="[actions]" slot-scope="data_subnets">
<b-button size="sm" :href="'subnets/'+ data_subnets.item.id">View</b-button>                  
<modal_edit-subnet></modal_edit-subnet>
<modal_delete-subnet :subnet="data_subnets.item"></modal_delete-subnet>
</template>
</b-table>
</b-card>
</div>
</template>
...
...
...

modal_delete子网

<template>
<div>
<b-button size="sm" @click="showConfirmModal">Delete</b-button>  
</div>
</template>
<script>
export default {   
name: 'Modal_DeleteSubnet',
props: ['subnet'],
data(){
return {              
data_subnet: this.subnet
}
},
methods : {
showConfirmModal() {   
this.$bvModal.msgBoxConfirm('Please confirm that you want to delete the subnet...'
, {
title: long2ip(this.data_subnet.ip_address) + '/' + this.data_subnet.netmask,
size: 'sm',
buttonSize: 'sm',
okVariant: 'danger',
okTitle: 'Yes',
cancelTitle: 'No',
footerClass: 'p-2',
hideHeaderClose: false,
centered: true
})
.then(value => {
if (value==true)
{
this.$emit('deleteSubnet', this.data_subnet.id)
}
})
.catch(err => {
// An error occurred
})
}
}
}
</script>

Answer 1

只需将其传输给父级即可。

<modal_delete-subnet :subnet="data_subnets.item" @delete-subnet="$emit('delete-subnet', $event)"></modal_delete-subnet>

或者，如果您有删除处理程序SubnetTable，请在此处处理。

<modal_delete-subnet :subnet="data_subnets.item" @delete-subnet="deleteHandler"></modal_delete-subnet>

export default {
...
methods: {
deleteHandler(e) {
console.log(e)
// delete actions here
},
},
...
}