vue父组件向子组件传递数据

Question

父组件向子组件中传递了一个对象，
tableData: {

key: '单号',
value: '1001',
number: '8485',
money: '900',

},

我在子组件中接受这个对象

<table class="mailTable">
    <tr>
        <td>{{tableData.key}}</td>
        <td>{{tableData.value}}</td>
        <td>{{tableData.number}}</td>
        <td>{{tableData.money}}</td>
    </tr>
</table>

export default {
    props: ['tableData']
}

结果

是我在子组件中有什么地方写错了吗

Answer 1

首先，你需要确认父组件中tableData是否写在了data或者computed属性中，如

data () {
    return {
        tableData: {
            key: '单号',
            value: '1001',
            number: '8485',
            money: '900'
        }
    }
}

然后，确认父组件是否真的把属性传过去了，假设子组件叫com，注意驼峰命名要改为短横线连接的命名:

<com :table-data="tableData"></com>

Answer 2

父组件没有把这个值传给子组件：

<div></div>
<erzi :tableData="tableData"></erzi>
<div></div>