似乎无法通过 Vue 中的道具将数据传递给组件

Question

我正在使用 Vue 3 作为学习项目制作动态 table，其中用户可以在 table 中添加或删除行，等等。我正在使用 table-row 组件创建行，并使用 table-data 组件在该行内创建数据单元格。添加一行是通过以下代码完成的：

const app = Vue.createApp({
    data() {
        return {
            tableRows: [],
        }
    },

    methods: {
        addRow() {
            this.tableRows.push(-1);
        },
    },
})

我需要做的是将数组TableRows和index传递给table-row组件，以便执行删除行操作，如下代码所示：

app.component('table-row', {
    props: {
        tableRows: Array,
        index: Number,
    },

    methods: {
        deleteRow(index) {
            this.tableRows.splice(index, 1);
        }
    },

    template: `
        <tr>
            <table-data></table-data>
            <table-data></table-data>
            <table-data></table-data>
            <table-data></table-data>
            <button @click="deleteRow">Delete Row</button>
        </tr>
    `
})

问题是 TableRows 和 index 的值都是未定义的（如 Vue DevTools 中所示），这意味着道具没有从父组件传递到子组件.我认为这就是每当我单击“删除行”按钮时弹出此错误的原因：

Uncaught TypeError: Cannot read properties of undefined (reading 'splice')

这是来自 Vue DevTools 的屏幕截图。可以看到 props 变量有未定义的值：

我不太确定为什么会这样，或者我能做些什么来解决这个问题。非常感谢任何帮助。

Answer 1

您在 @click="deleteRow" 中没有通过 index 尝试将方法更改为：

deleteRow() {
   this.tableRows.splice(this.index, 1);
}

或将 index 传递给方法：

@click="deleteRow(index)"

Answer 2

我认为所有 props 必须首先在父数据中声明，然后才能绑定为 children 中的 props

"PARENT"
<template>
...
  <Child :tableRows="tableRows" />
...
</template>

...
<script>
 ...
  data() {
    return {
      tableRows: []
    }
  }
  ...
</script>

"CHILD"
...
</script>
  ...
  props: {
    tableRows: Array
  }
  ...
</script>

至于索引，您可能必须 emit 事件在点击时返回给父级。

"CHILD"
<template>
...
  <button @click="$emit('deleteRow')">Delete Row</button>
...
</template>

在这里您必须在父级中处理它，其中 e 是与事件关联的值——在这种情况下，大概是您想要的索引。

"PARENT"
<template>
...
  <Child @deleteRow="deleteRow(e)" :tableRows="tableRows" />
...
</template>

似乎无法通过 Vue 中的道具将数据传递给组件

Can't seem to pass data to component via props in Vue

vue.js

vue-component

vuejs3