使用uni-app uni-table组件this.$parent.$options.name 报错undefined

使用uni-app uni-table组件this.$parent.$options.name 报错undefined

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 第三方开发者工具版本号 基础库版本号 项目创建方式
uniapp/小程序/阿里 Windows windows 10 正式 3.8.12 3.7.13 {“name”: “minnesota”, “version”: “1.0.0”} HBuilderX

示例代码：

<uni-collapse>
<uni-collapse-item  v-for='(prescription,index) in bill.prescriptions' :key="index" :title="prescription.dpName">
<!-- <text slot="title">{{prescription.dpName}}</text> -->
<template v-slot:title>
<view class="uni-collapse-item title-box">
<view class="uni-collapse-item title-text">
<view style="overflow: hidden;" :class="{active: index === activeIndex}">
<text v-show="!!showPayBtn" @click.native.stop="chooseBill(index, prescription)">
<uni-icons type="checkbox-filled" size="24" ></uni-icons>
</text>
<text v-show="!!showPayBtn" style="margin-left:15px">
{{ prescription.priority }}
</text>
<text>
{{prescription.dpName}}
</text>
</view>
</view>
</view>
</template>
<view class="content">
<view class="uni-container">
<uni-table  ref="table" :loading="loading" >
<uni-tr >
<uni-th align="center">名称</uni-th>
<uni-th align="center">规格</uni-th>
<uni-th align="center">数量</uni-th>
<uni-th align="center">金额</uni-th>
</uni-tr>
<uni-tr v-for='(bill,i) in items[index]' :key="i">
<uni-td align="center">{{ bill.itemName }}</uni-td>
<uni-td align="center">
{{ bill.leastUnit }}
</uni-td align="center">
<uni-td align="center">
{{ bill.leastNumber }}
</uni-td>
<uni-td align="center">
¥{{ bill.itemAmount|currency }}
</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</uni-collapse-item>
</uni-collapse>


### 操作步骤：


```javascript
getTable(name) {
let parent = this.$parent
let parentName = parent.$options.name
console.log('this:',this)  
console.log('parent:', this.$parent)  
console.log('parentName:', parent.$options.name)  
while (parentName !== name) {  
    parent = parent.$parent  

    if (!parent) return false  
    parentName = parent.$options.name  
}  
return parent  
}


### 预期结果：


```javascript
getTable(name) {
let parent = this.$parent
let parentName = parent.$options.name
console.log('this:',this)  
console.log('parent:', this.$parent)  
console.log('parentName:', parent.$options.name)  
while (parentName !== name) {  
    parent = parent.$parent  

    if (!parent) return false  
    parentName = parent.$options.name  
}  
return parent  
}


### 实际结果：



this.$parent.$options.name不存在


### bug描述：


使用uni-collapse +uni-table组件因为无法找到this.$parent.$options.name导致报错

更多关于使用uni-app uni-table组件this.$parent.$options.name 报错undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到这个问题了，同问。我的是vue3版本

更多关于使用uni-app uni-table组件this.$parent.$options.name 报错undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用组件层级关系时，this.$parent.$options.name可能无法获取到预期的组件名称，这是因为：

  1. uni-app的组件渲染机制可能导致DOM结构与组件实例层级不一致
  2. 部分UI组件(如uni-table)可能使用了虚拟DOM或特殊渲染方式

替代方案建议：

  1. 使用ref直接获取组件实例：
// 模板中给table添加ref
<uni-table ref="myTable"></uni-table>

// 方法中直接访问
this.$refs.myTable
  1. 如果必须通过父级查找，可以尝试：
let parent = this.$parent
while(parent) {
    if(parent._isVue && parent.$options.__file) {
        // 这里可以获取组件信息
        console.log(parent.$options.__file)
    }
    parent = parent.$parent
}
  1. 对于uni-collapse场景，建议使用事件通信而非直接访问父组件：
// 子组件触发事件
this.$emit('table-ready', this)

// 父组件监听
<uni-collapse-item [@table-ready](/user/table-ready)="handleTableReady">
回到顶部