Question

在component1.vue上我有

  export default {
    data () {
      return {
        editItemNumber: null,
        editBreakdownNumber: null
      }
    }

在component2.vue上我有一个由数组填充的表

在该表上是一个编辑按钮。该表中的项目是itemNumber值。我需要从该特定行分配到component1.vue上的editItemNumber

<b-table show-empty bordered striped hover :items="itemTableList" :fields="fields">
  <template slot="actions" scope="row">
<b-btn variant='success' size="sm" @click.stop="edit(row.item,row.index,$event.target)">Edit</b-btn>
</template>
</b-table>

如上所述，最初所有这一切都在一个组件上，我只是调用一个编辑函数，该函数重新填充了具有该行内容的v模型。但现在，各个组件之间存在分歧，我不知道如何编辑它来完成我所负责的任务。

我从未使用JavaScript，vue或基本HTML以外的任何内容。我是一名.NET开发人员，他的任务是帮助完成一些基于网络的工作，而且我正在挣扎。所以任何帮助都表示赞赏。

Answer 1

在组件之间移动数据的首选方法是使用事件。

通常使用props将数据从父组件传递给子组件，将事件从子组件传递给父组件。

因此edit的{{1}}方法可能类似于

C2

然后你只需要在edit(item, index, target) { const payload = { item, index, target }; this.$emit('edit', payload); }听取那个事件。请注意C1属性：这意味着从@edit触发edit事件时，请运行我的“编辑”方法。

component-one

如果<template> <div> <p>{{ editItemNumber }}</p> <component-two @edit="edit" /> </div> <script> export default { data () { return { editItemNumber: null, editBreakdownNumber: null }; }, methods: { edit(eventPayload) { this.editItemNumber = eventPayload.item.editItemNumber } } </script>和C1都是同一个父C2的孩子，那么这个想法是相同的，除了P无法直接收听C1 }。相反，C2会听取编辑事件，并通过其P将所需的更改传递到C1。

关于组件的文档非常好，请特别注意有关道具和自定义事件的部分。 https://vuejs.org/v2/guide/components.html

将数据从一个组件传递到另一个组件

1 个答案: