vue父组件通过ref获取子组件data数据出现undefined(问题篇)

最新推荐文章于 2024-08-16 17:40:09 发布

skyblue_afan

最新推荐文章于 2024-08-16 17:40:09 发布

阅读量3.2k

点赞数 1

分类专栏： vue.js 文章标签： vue.js es6

本文链接：https://blog.csdn.net/skyblue_afan/article/details/117918642

版权

vue.js 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文介绍了在Vue中如何从父组件获取子组件的数据，通过`this.$nextTick`和`setTimeout`实现数据延迟加载，确保父组件能够正确获取到子组件更新后的数据。示例代码详细展示了这两种方法的用法。

摘要由CSDN通过智能技术生成

解决办法：

1、使用this.$nextTick

<template>
  <!-- 父组件 -->
  <div class="box" style="margin:20px">
    <child ref="childData"></child>
    <button @click="handelAZiZuJian">点击</button>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {
    };
  },
  created() {
    //使用this.$nextTick()
    this.$nextTick(() => {
      this.handelStrData();
    });
  },
  methods: {
    handelStrData() {
      console.log(this.$refs["childData"].objData);
    },
    handelAZiZuJian() {
      this.$refs.childData.handelAlert();
    },
  },
};
</script>

2、使用setTimeout()

<template>
  <!-- 父组件 -->
  <div class="box" style="margin:20px">
    <child ref="childData"></child>
    <button @click="handelAZiZuJian">点击</button>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {
    };
  },
  created() {
     this.handelStrData();
  },
  methods: {
    handelStrData() {
     //使用setTimeout()延时加载
     setTimeout(() => {
        console.log(this.$refs["childData"].objData);
     }, 10);
    },
    handelAZiZuJian() {
      this.$refs.childData.handelAlert();
    },
  },
};
</script>

这样就可以获取子组件的data中的数据。代码可复制查看。