uni-app cli nvue H5编译嵌套组件Ref失效为null

项目信息	详情
产品分类	uniapp/H5
PC开发环境	Windows
操作系统版本	win10
浏览器平台	Chrome
浏览器版本	100
项目创建方式	CLI
CLI版本号	3.0.0-alpha-3040920220508001

操作步骤：

创建a组件，
创建b组件
创建c组件。在a组件中：放入b组件，b组件内套入c组件。此时：c组件的ref方法无法暴露。

预期结果：

不管如何嵌套组件，ref方法要正常使用

实际结果：

嵌套组件中的ref打印结果为null
能得到该组件实例，但方法为null

bug描述：

以下bug在h5平台：
组件a中套入组件规则：

<b ref="b">  
<c ref="c"></c>  
</b>

c对外暴露的方法，打印为null。无法调用c的方法。实测除h5平台有bug外，其它平台正常。
这个级别bug非常严重。

itying888 1楼•1 个月前

发可重现的测试工程

nodeper 2楼•1 个月前

进入页面后，请点击进入bug6图标

sinazl 3楼•1 个月前

现在新版本在支付宝上有问题的。还没修复。麻烦关注下这个问题。很久了。

vueper 4楼•1 个月前

现在新的版本413只有支付宝上获取不到ref方法了。

htzhanglong 5楼•1 个月前

进入页面后，请点击进入bug6图标

h691938207 6楼•1 个月前

现在新的版本413只有支付宝上获取不到ref方法了。

songsunli 7楼•1 个月前作者

在使用 uni-app 的 cli 模式开发 nvue 页面时，如果遇到嵌套组件中的 ref 失效（即 ref 为 null）的情况，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 确保组件正确引入和注册

确保你在父组件中正确引入了子组件，并且在 components 中注册了子组件。

<template>
  <div>
    <ChildComponent ref="childRef" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.childRef); // 确保这里不是 null
  }
};
</script>

2. 确保组件正确渲染

如果子组件的渲染依赖于某些条件（例如 v-if），确保这些条件在 mounted 钩子执行时已经满足。

<template>
  <div>
    <ChildComponent v-if="isVisible" ref="childRef" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      isVisible: false
    };
  },
  mounted() {
    this.isVisible = true;
    this.$nextTick(() => {
      console.log(this.$refs.childRef); // 确保这里不是 null
    });
  }
};
</script>

3. 使用 `$nextTick` 确保 DOM 更新

如果子组件的渲染是异步的，可能需要使用 $nextTick 来确保 DOM 更新后再访问 ref。

<template>
  <div>
    <ChildComponent ref="childRef" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.$refs.childRef); // 确保这里不是 null
    });
  }
};
</script>

4. 检查 `nvue` 页面的特殊性

nvue 页面的渲染机制与 vue 页面有所不同，特别是在 H5 环境下。确保你使用的 ref 在 nvue 页面中是支持的。

5. 检查 `uni-app` 版本

确保你使用的 uni-app 版本是最新的，或者至少是一个稳定的版本。某些旧版本可能存在 ref 相关的 bug。

6. 调试和排查

如果以上方法都无法解决问题，可以尝试在子组件的 mounted 钩子中打印日志，确保子组件确实已经挂载。

<script>
export default {
  mounted() {
    console.log('ChildComponent mounted');
  }
};
</script>

7. 使用 `provide/inject` 作为替代方案

如果 ref 仍然无法正常工作，可以考虑使用 provide/inject 来在父子组件之间传递数据或方法。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      parentMethod: this.parentMethod
    };
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};
</script>

<!-- 子组件 -->
<script>
export default {
  inject: ['parentMethod'],
  mounted() {
    this.parentMethod();
  }
};
</script>