vue中组件交互 父传子 删除表格信息

vue中的删除表格信息，居于组件交互，删除过程在父组件与子组件代码中分为六个步骤 按步骤更好理解
效果图

默认状态↓

删除状态↓
删除后↓
代码↓
父组件（页面）

<template>
  <div class="box">
    <table class="tab" style="border-collapse:collapse;width:80%;margin:10px auto;">
      <tr>
        <th>序号</th>
        <th>工号</th>
        <th>姓名</th>
        <th colspan="2">操作</th>
      </tr>
      <tr v-for="(item,index) in user" :key="item.id" class="trr">
        <td>{
   {
   index+1}}</td>
        <td>{
   {
   item.hao}}</td>
        <td>{
   {
   item.name}}</td>
       
        <!-- 第一步  ===》  :dex='item.studentid'（父组件传给子组件） 子组件props来接收 ( props: ['dex'],) -->
        <!-- 第五步  ====》  @ddd<