The vue parent component passes data to the child component

the parent component passes an object to the child component,
tableData: {

key: "",
value: "1001",
number: "8485",
money: "900",

},

I accept this object in the subcomponent

<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"]
}

result

clipboard.png

did I write something wrong in the subcomponent

Mar.09,2021

first, you need to make sure that tableData in the parent component is written in the data or computed attributes, such as

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

then, confirm whether the parent component really passed the attribute. assume that the child component is called com , and note hump naming to be changed to short line connection :

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

the parent component did not pass this value to the child component:

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