uni-app中this.$parent.$options没有name属性

uni-app中this.$parent.$options没有name属性

示例代码：

/**  
 * 如官方的 uni-collapse-item 组件  
 * 获取父元素实例  
 */  
getCollapse(name = 'uniCollapse') {  
  let parent = this.$parent  
  let parentName = parent.$options.name  
  while (parentName !== name) {  
    parent = parent.$parent  
    if (!parent) return false  
    parentName = parent.$options.name  
  }  
  console.log(parent)  
  return parent  
}

操作步骤：

/**  
 * 如官方的 uni-collapse-item 组件  
 * 获取父元素实例  
 */  
getCollapse(name = 'uniCollapse') {  
  let parent = this.$parent  
  let parentName = parent.$options.name  
  while (parentName !== name) {  
    parent = parent.$parent  
    if (!parent) return false  
    parentName = parent.$options.name  
  }  
  console.log(parent)  
  return parent  
}

预期结果：

/**  
 * 如官方的 uni-collapse-item 组件  
 * 获取父元素实例  
 */  
getCollapse(name = 'uniCollapse') {  
  let parent = this.$parent  
  let parentName = parent.$options.name  
  while (parentName !== name) {  
    parent = parent.$parent  
    if (!parent) return false  
    parentName = parent.$options.name  
  }  
  console.log(parent)  
  return parent  
}

实际结果：

parent.$options.name 属性不存在

bug描述：

this.$parent.$options没有name属性

示例图片


更多关于uni-app中this.$parent.$options没有name属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中this.$parent.$options没有name属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，this.$parent.$options.name 无法获取到组件名，这是因为uni-app在编译过程中对组件进行了处理。在Vue.js中，$options.name 通常可以获取到组件的注册名称，但在uni-app中，由于跨平台编译的需要，组件的 $options 对象可能不包含 name 属性。

要解决这个问题，你可以使用以下方法：

  1. 使用 this.$parent.$options.__name：
    在uni-app中，组件的名称可能存储在 __name 属性中。你可以尝试通过 this.$parent.$options.__name 来获取父组件的名称。例如：

    let parentName = parent.$options.__name

  2. 通过 this.$parent.$options.componentName 获取：
    在某些情况下，组件的名称可能存储在 componentName 属性中。你可以检查 parent.$options.componentName 是否存在。

  3. 使用 this.$parent.$vnode.tag 获取组件标签名：
    通过 this.$parent.$vnode.tag 可以获取到父组件的标签名，但注意这可能是编译后的标签名，可能与原始组件名不完全一致。

  4. 通过自定义属性传递父组件信息：
    如果上述方法都不适用，建议在父组件中通过 props 或自定义属性将组件名传递给子组件。例如，在父组件中定义一个 parentName 属性，子组件通过 this.$parent.parentName 获取。

示例修改代码：

getCollapse(name = 'uniCollapse') {
  let parent = this.$parent
  // 尝试使用 __name 或 componentName
  let parentName = parent.$options.__name || parent.$options.componentName
  while (parentName !== name) {
    parent = parent.$parent
    if (!parent) return false
    parentName = parent.$options.__name || parent.$options.componentName
  }
  console.log(parent)
  return parent
}
回到顶部