Vue3通过props向table-row组件传值为undefined的问题如何解决

问题原因 #

• 父组件渲染table-row组件时，未显式绑定传递tableRows和index两个props，导致子组件接收值为undefined，调用splice方法时就会触发类型错误
• 直接在子组件内修改父组件传入的数组类型props，不符合Vue单向数据流设计规范，虽然引用类型修改可临时生效，但后续维护很容易出现数据流混乱问题
• 额外注意：HTML规范中<tr>的直接子元素只能是<td>/<th>，直接放按钮会导致DOM结构渲染异常，需要把按钮套在<td>标签内

修复步骤 #

1. 修正父组件模板中table-row的调用写法 #

父组件遍历tableRows渲染行时，要显式绑定需要的props：

<!-- 父组件template部分 -->
<table>
  <table-row 
    v-for="(item, idx) in tableRows" 
    :key="idx" 
    :index="idx" 
    :table-rows="tableRows"
  ></table-row>
</table>
<button @click="addRow">新增行</button>

2. （推荐）调整为子组件抛事件、父组件处理删除逻辑的写法，避免直接修改props #

修改子组件代码：

app.component('table-row', {
    props: {
        index: Number,
    },
    emits: ['delete'], // 声明要触发的自定义事件，符合Vue3规范
    methods: {
        deleteRow() {
            this.$emit('delete', this.index) // 把当前行的索引传给父组件处理
        }
    },
    template: `
        <tr>
            <table-data></table-data>
            <table-data></table-data>
            <table-data></table-data>
            <table-data></table-data>
            <td><button @click="deleteRow">Delete Row</button></td>
        </tr>
    `
})

同步修改父组件模板，绑定删除事件处理逻辑：

<table-row 
  v-for="(item, idx) in tableRows" 
  :key="idx" 
  :index="idx"
  @delete="tableRows.splice($event, 1)"
></table-row>

修改完成后props传值恢复正常，删除逻辑也符合Vue的数据流规范，报错会直接消失。

内容的提问来源于stack exchange，提问作者Nogdev