我学习了VUE.JS，当我尝试获取数据值和编辑/更新功能时，我收到了这两个错误。我设法获取了所有数据，但收到了警告：

[Vue warn]: Extraneous non-emits event listeners (editedStation) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 
  at <StationItem key=121 id=121 line="test"  ... > 
  at <StationList onVnodeUnmounted=fn<onVnodeUnmounted>

[Vue warn]: Extraneous non-props attributes (id) were passed to component but could not be automatically inherited because component renders fragment
in console after sending the data from the row into form.

子组件：

<template>
  <tr>
    <td style="padding: 10px">{{ line }}</td>
    <td style="padding: 10px">{{ physLine }}</td>
    <td style="padding: 10px">{{ wsType }}</td>
    <td style="padding: 10px">{{ ws }}</td>
    <td style="padding: 10px">{{ name }}</td>
    <td style="padding: 10px">{{ isValid }}</td>
    <td style="padding: 10px">{{ stationGroupId }}</td>
    <td style="padding: 10px">{{ order }}</td>
    <td style="padding: 10px" class="actions">
      <button @click="editStation($event)" v-bind:id="stationId">
        {{ editIsClicked ? "Done" : "Edit" }}
      </button>
    </td>
  </tr>
  <tr v-if="editIsClicked" style="background-color: #ffda99">
    <td colspan="3" style="padding: 30px 0px 30px 30px">
      <div class="form-control" style="margin-bottom: 10px; width: 80%">
        <label for="line" style="display: block; text-align: left; font-size: 14px"
          >Line Number</label
        >
        <input
          type="text"
          :value="station.lineNum"
          style="width: 90%; display: block; text-align: left"
        />
      </div>
      <div class="form-control" style="margin-bottom: 10px; width: 80%">
        <label
          for="physLine"
          style="width: 90%; display: block; text-align: left; font-size: 14px"
        >
          Phys line
        </label>
        <input
          type="text"
          :value="station.physLine"
          style="width: 90%; display: block; text-align: left"
        />
      </div>
      <div class="form-control" style="margin-bottom: 10px; width: 80%">
        <label
          for="wsType"
          style="width: 90%; display: block; text-align: left; font-size: 14px"
          >WS Type</label
        >
        <input
          type="text"
          :value="station.wsType"
          style="width: 90%; display: block; text-align: left"
        />
      </div>

      <div
        class="form-control"
        style="width: 50%; margin-bottom: 10px; border: 1px solid #b5b5b5"
      >
        <label
          for="isValid"
          style="width: 40%; display: block; text-align: left; font-size: 14px"
          >is Valid</label
        >
        <input type="checkbox" :value="station.isValid" style="margin-left: -350px" />
      </div>

      <p v-if="!isValid.isValid">{{ errorMessage }}</p>
      <tr v-for="(btn, index) in filteredButtonList" v-bind:key="btn.id">
        <td>{{ btn.buttonListName }}</td>
        <td>{{ btn.buttonListDesc }}</td>
        <td>
          <select
            @change="onQuidoIdChange($event)"
            class="form-select form-control required"
            v-bind:id="index + 1"
          >
            <option
              class="quido-id"
              v-for="entry in selectedQuidoId"
              :value="entry.quidoId"
              selected
              :key="entry.quidoId"
              disabled
              hidden
            >
              {{ entry.quidoName }}
            </option>
            <option
              v-for="quido in filteredQuidosList"
              :value="quido.quidoId"
              v-bind:key="quido.quidoId"
              v-bind:id="quido.quidoId"
            >
              {{ quido.quidoName }}
            </option>
          </select>
        </td>
        <td>
          <tr>
            <td>
              <input
                @change="onInputChange($event)"
                type="number"
                class="input-custom"
                :placeholder="`Input ${index + 1}`"
                v-bind:id="index + 1"
                :value="station.stationButtons[index].input"
              />
            </td>
          </tr>
        </td>
      </tr>
    </td>
    <td colspan="6" style="padding-bottom: 250px:">
      <div class="form-control" style="margin-bottom: 10px">
        <label style="display: block; text-align: left; font-size: 14px" for="wsName"
          >WS Name</label
        >
        <input
          type="text"
          :value="station.wsName"
          style="width: 80%; display: block; text-align: left"
        />
      </div>
      <div class="form-control" style="margin-bottom: 10px">
        <label style="display: block; text-align: left; font-size: 14px" for="wsName"
          >Position Name</label
        >
        <input
          type="text"
          :value="station.posName"
          style="width: 80%; display: block; text-align: left"
        />
      </div>
      <div class="form-control" style="margin-bottom: 10px">
        <label
          style="width: 80%; display: block; text-align: left; font-size: 14px"
          for="wsName"
          >Order</label
        >
        <input
          type="text"
          :value="station.order"
          style="width: 80%; display: block; text-align: left"
        />
      </div>
      <div class="form-control" style="width: 82%">
        <label for="stationGroupId">Choose Station Group</label>
        <select
          @change="changeStationGroupId($event)"
          style="width: 100%"
          v-bind:id="index + 1"
          class="required"
        >
          <option
            class="stgr-id"
            v-for="entry in selectedStationGroupId"
            :value="entry.stationGroupId"
            selected
            :key="entry.stationGroupId"
            disabled
            hidden
          >
            {{ entry.stationGroupsName }}
          </option>
          <option
            v-for="stGrId in filteredStationGroups"
            :value="stGrId.stationGroupsId"
            v-bind:key="stGrId.stationGroupsId"
          >
            {{ stGrId.stationGroupsName }}
          </option>
        </select>
      </div>
    </td>
  </tr>
</template>

父组件：

<template>
  <div class="section-global">
    <station-form @save-data="saveData"> </station-form>
  </div>
  <div class="section-global">
    <table v-if="hasStations" class="render-list-table">
      <thead>
        <!-- <th><a href="">Line ID</a></th> -->
        <th>Line num</th>
        <th>Phys Line</th>
        <th>WS Type</th>
        <th>WS Name</th>
        <th>Pos. name</th>
        <th>isValid</th>
        <th>Station Group ID</th>
        <th>Order</th>
        <th>Actions</th>
      </thead>
      <tbody>
        <station-item
          v-for="station in filteredStations"
          :key="station.stationId"
          :id="station.stationId"
          :station-id="station.stationId"
          :line="station.lineNum"
          :phys-line="station.physLine"
          :ws-type="station.wsType"
          :ws="station.wsName"
          :name="station.posName"
          :order="station.order"
          :is-valid="station.isValid"
          :stationGroupId="station.stationGroupId"
          @editedStation="editFormData($event)"
        >
        </station-item>
      </tbody>
    </table>
    <h1 v-else>NO STATIONS FOUND</h1>
  </div>
</template>

<script>
import StationItem from "@/components/stations/StationItem.vue";
import StationForm from "@/components/stations/StationForm.vue";

export default {
  data() {
    return {
      editedDataToBeSendToFormInputs: [],
    };
  },
  components: {
    StationItem,
    StationForm,
  },
  computed: {
    filteredStations() {
      return this.$store.getters["stations/stations"];
    },
    hasStations() {
      return this.$store.getters["stations/hasStations"];
    },
    probaFiltered() {
      return this.$store.getters["stations/probaGetter"];
    },
  },
  created() {
    this.loadStations();
    this.loadProba();
  },
  methods: {
    editFormData(event) {
      const dataToBeEdited = event;
      // this.editedDataToBeSendToFormInputs.push(dataToBeEdited);
      const test = this.probaFiltered;
      test.push(dataToBeEdited);
      this.loadProba();
    },
    saveData(data) {
      this.$store.dispatch("stations/addStation", data);
    },
    loadStations() {
      this.$store.dispatch("stations/loadStationList");
    }
  },
};
</script>

Problem visualisation.
有人能帮我摆脱这个浏览器警告吗？
我尝试了StackOverflow的几个解决方案，但都没有成功。我用div标签 Package 了t-row，并且我遇到了另一个渲染问题，我无法在下一个需要该数据的组件中将div渲染为t-row。
先谢了。
在未能通过EventBus将数据发送到Create部分（A1）之后，我决定在我呈现的组件（B2）内部创建表单，并将数据发送到B1组件。
我试图将数据从孩子发送到父母（从B2到B1），但我得到了上面的错误。应用程序工作，但我讨厌错误。