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

Posted 2023-02-23

【中文标题】似乎无法通过 Vue 中的道具将数据传递给组件

【英文标题】：Can't seem to pass data to component via props in Vue

【发布时间】：2021-11-13 15:17:01

【问题描述】：

我正在使用 Vue 3 作为学习项目制作一个动态表格，用户可以在其中添加或删除表格中的行，等等。我使用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 中所示），这意味着 props 没有从父组件传递到子组件。我认为这就是每当我单击“删除行”按钮时弹出此错误的原因：

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

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

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

【问题讨论】：

对此不是 100%，但我认为您必须使用父级的 v-on 绑定传递道具才能在子级中使用它们。您可以尝试将模板 html 添加到父级而不是子级，并在那里使用v-on 绑定道具。

@Chaos_Is_Harmony 据我了解组件和道具，情况不一定如此。 Vue 指南页面上的示例直接传递了道具……我猜？我不确定他们的方法叫什么。至于将模板移动到父级中，我想这是一个想法。我会尝试一下，看看我能用它做什么，但它不会解决我现在面临的问题。

@Chaos_Is_Harmony，你是对的。我必须将变量绑定到 HTML 本身中的组件。像<table-row :tableRow="tableRow" :index="index"></table-row> 这样的东西。然而，tableRow 仍然是未定义的，即使 index 变量被传递到组件。我怀疑数据不匹配，但我不确定。

编辑上一条评论：这不是类型不匹配。似乎tableRows 是一个属性（如果我相信 Vue DevTools），而不是一个道具。我现在必须提出一个新问题吗？-？ ?

我发布了一个更详细的答案，希望对您有所帮助。

【参考方案1】：

我认为所有的 props 都必须首先在 parent 的数据中声明，然后才能绑定为 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>

【讨论】：

是的！这非常有效。我不得不调整几件事，但你所描述的是我正在寻找的答案。谢谢你。有趣的是，当我通过i 而不是index 时，该功能仍然可以正常工作，尽管不是在控制台中发出警告之前。我是否因为没有类型化而遇到了一些 javascript 问题？

希望我知道。我对 Vue.js 和 javascript 比较陌生，但我之前遇到过这个问题。这就是我记得的原因：Parent->Child = Props;孩子->父母=发射。

【参考方案2】：

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

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

或将index 传递给方法：

@click="deleteRow(index)"

【讨论】：

对不起，两个都试过了，还是不行。我添加了 Vue DevTools 的屏幕截图，它仍然将 props 的值显示为未定义。