uni-app 小红书子组件中 this 实例里取$parent 为 undefined

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 小红书子组件中 this 实例里取$parent 为 undefined

操作步骤：

打开项目安装依赖后 执行npm run dev:xhs 即可看到效果 src/components/child.vue src/components/parent.vue

预期结果：

在页面中父组件里面包裹的子组件 输出实例的$parent 可以正常获取到父组件实例

实际结果：

输出实例的时候 $parent undefined 或为当前页面的实例

bug描述：

使用uniapp vue2 编译后的小红书小程序 有一个父组件 内容为slot插槽 在页面中引入父组件然后在 父组件里面 写入子组件 在子组件 mounted 输出实例的时候 $parent undefined 或为当前页面的实例

相关链接：

附件：

uni_xhs_-parent_bug-master.zip


Harmonyos Next教程
3 回复

好，我看到了，我在这里进行跟进。
经过我测试，vue2 里 this.$parent 获取不到。但是 vue3 里运行 ok，如果在选型阶段可以考虑。
vue2 获取 $parent 不到的问题，有进展会在这里更新。


好的，因为之前项目架构是vue2这次是增量兼容小红书平台，暂时不会升级vue3，这个问题麻烦有进展了和我同步一下，或者有什么临时的解决方案也可以。辛苦了 多谢

在 uni-app 中，如果你在一个子组件中尝试通过 this.$parent 访问父组件实例，但发现 this.$parent 为 undefined，这通常意味着在当前的执行上下文中，组件的父级实例尚未被正确初始化或者当前的组件实例尚未挂载到 DOM 上。以下是一些可能的原因和解决方法，同时我将提供一个代码示例来说明如何正确地在组件中使用 this.$parent。

可能的原因

  1. 组件尚未挂载：在组件的生命周期钩子中，如果在 created 钩子中尝试访问 this.$parent，可能会得到 undefined，因为此时组件尚未挂载到 DOM 上，父组件的引用也未建立。

  2. 父组件未正确传递：确保父组件确实包含了子组件，并且没有条件渲染导致子组件未被渲染。

解决方法

  • 在 mounted 钩子中访问：在 mounted 钩子中访问 this.$parent 通常是安全的，因为此时组件已经挂载完成。

代码示例

父组件 (ParentComponent.vue)

<template>
  <view>
    <child-component></child-component>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Hello from Parent!'
    };
  }
};
</script>

子组件 (ChildComponent.vue)

<template>
  <view>
    <text>{{ parentMessage }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: ''
    };
  },
  mounted() {
    // 确保在 mounted 钩子中访问 $parent
    if (this.$parent) {
      this.parentMessage = this.$parent.parentData;
    } else {
      console.error('Parent component is undefined');
    }
  }
};
</script>

注意事项

  • 避免过度依赖：虽然 this.$parent 可以用来访问父组件的数据和方法，但过度依赖这种方式会降低组件的可重用性和可维护性。考虑使用事件总线、Vuex 或 props + events 的方式来管理组件间的通信。

  • 生命周期钩子：确保在正确的生命周期钩子中访问父组件，通常是在 mounted 或之后的钩子中。

通过上述代码示例和注意事项，你应该能够在 uni-app 中正确地访问父组件实例，同时避免一些常见的陷阱。

回到顶部