uniapp 父组件调用子组件方法 this.$refs失效的问题,搞了几天，终于有效

uniapp 父组件调用子组件方法 this.$refs失效的问题

一般在methods中定义一个方法，然后直接调用，一般在按钮事件中没有问题。直接使用this.$refs.XXX即可。如下：

  methods: {

    callChildMethod() {

      this.$refs.childComponent.childMethod(); // 直接调用，通常放在按钮点击事件中更合适

    }

  }

但是，问题来了，如果你想在methods之外就调用组件，可能会出现问题，因为相关的DOM或组件未被渲染而出现undefined错误。怎么办？

经过几天的努力，终于搞定了。

解决方法：

原因：确保在使用$refs之前，相关的DOM或组件已经被渲染。

第一种方法：可以通过在mounted钩子中调用或在模板渲染后立即（如按钮点击事件）进行。

如下：

export default {

  mounted() {

    this.$nextTick(() => {

      this.$refs.childComponent.childMethod(); // 调用子组件的方法

    });

  },

}

以上是在mounted钩子中调用。

什么？

我不大会使用mounted钩子，或者不想搞那么复杂。可以，下面就第二种方法：直接调用！！！可以在任意地方，如onShow,onCreate等地方使用。

第一种方法：onShow() { 

......

 this.$nextTick(() => {

      this.$refs.childComponent.childMethod(); // 调用子组件的方法

    });

｝

注意：必须通过this.$nextTick()来确保DOM已经渲染完毕。