关于子组件绑定一个ref属性，期望通过该属性在父组件传值，但是ref属性打印出来报错undefined?

Question

关于子组件绑定一个ref属性，期望通过该属性在父组件传值，但是ref属性打印出来报错undefined?

发布于
2024-04-19 江苏

更新于
2024-04-27

打印当前vue实例可以看到挂载到实例上的ref,但是直接打印ref.xx就会报错undefined

 <dv-border-box-13 style="flex: 0 1 33%">
            <LineBarChart ref="currentTotal"></LineBarChart>
 </dv-border-box-13>

注册子组件，并绑定ref属性

  <div class="left-box">
          <span>当班合格/不良统计</span>
          <dv-border-box-12 style="flex: 0 1 33%">
            <LineBarChart ref="currentTotal"></LineBarChart>
          </dv-border-box-12>
          <span>产品合格率统计</span>
          <dv-border-box-13 style="flex: 0 1 33%">
            <LineBarChart ref="productionPassRateStatistic"></LineBarChart
          ></dv-border-box-13>
          <span>产能达成率</span>
          <dv-border-box-13 style="flex: 0 1 33%">
            <LineBarChart ref="productionAchievingRate"></LineBarChart
          ></dv-border-box-13>
   </div>

子组件获取数据

 getCurrentTotal() {
      let chartData = []
      let connection = signalr()
      connection.on('SendCurrentTotal', (limit) => {
        console.log('SendCurrentTotal 当班统计', limit)
        chartData = limit
      })
      start()
      const dataObj = {
        yAxisName: '件',
        type: ['bar', 'bar', 'line'],
        itemTitle: ['良品数', 'NG数', 'NG率'],
        chartData: chartData,
      }
      this.$refs.currentTotal.initChart(dataObj)
    },

并在父组件created钩子中调用

 created() {
    this.getCurrentTotal()
  },

使用$nextTick在dom加载完在去获取,还是报undefined

解决：数据赋值在新方法里面实现
直接赋值和创建新的方法赋值实现效果差异是因为什么?

  getCurrentTotal() {
      let connection = signalr()
      connection.on('SendCurrentTotal', (limit) => {
        console.log('SendCurrentTotal 当班统计', limit)
        this.sendCurrentTotal(limit)
      })
      start()
    },
    sendCurrentTotal(limit){
      const dataObj = {
        yAxisName: '件',
        type: ['bar', 'bar', 'line'],
        itemTitle: ['良品数', 'NG数', 'NG率'],
        chartData: limit,
      }
      this.$refs.currentTotal.initChart(dataObj)
    },

前端 vue.js

阅读 387

AI BotBETA

在 Vue 中，ref 被用来为元素或子组件注册引用信息。当你在模板中设置 ref 属性时，你可以在 Vue 实例的方法中通过 this.$refs 访问到这个元素或组件。

然而，需要注意的是，$refs 只会在组件渲染完成后被填充，并且它不是一个响应式依赖，因此你不应该尝试在模板中或计算属性中访问它。

在你的情况中，如果你在模板中直接访问 ref.xx，或者在组件的 created 或 mounted 生命周期钩子中立即访问它，可能会得到 undefined，因为这时子组件可能还没有完全挂载或渲染。

为了解决这个问题，你可以使用 Vue 的 $nextTick 方法，该方法会在 DOM 更新后延迟执行一个函数。这样，你可以确保在访问 ref 时，子组件已经渲染完成。

以下是如何使用 $nextTick 来确保 ref 可以被正确访问的示例：

<template>
  <div>
    <dv-border-box-13 style="flex: 0 1 33%">
      <LineBarChart ref="currentTotal"></LineBarChart>
    </dv-border-box-13>
    <button @click="accessRef">访问 ref</button>
  </div>
</template>

<script>
export default {
  methods: {
    accessRef() {
      this.$nextTick(() => {
        // 在这里访问 this.$refs.currentTotal
        console.log(this.$refs.currentTotal);
      });
    }
  }
}
</script>

在这个示例中，我们创建了一个按钮，当点击这个按钮时，会触发 accessRef 方法。在这个方法中，我们使用 $nextTick 来确保在访问 this.$refs.currentTotal 时，LineBarChart 组件已经渲染完成。

如果即使使用 $nextTick 你仍然得到 undefined，那么可能有以下原因：

组件未正确渲染：确保 LineBarChart 组件没有条件渲染（如 v-if），这可能导致组件在某些情况下不被渲染。
ref 使用错误：确保你正确地使用了 ref 属性，并且它应用在了正确的元素或组件上。
子组件的渲染时机：如果 LineBarChart 组件依赖于某些异步数据或条件渲染，它可能会延迟渲染。在这种情况下，你可能需要在子组件中监听某个事件或属性，以确保在访问 ref 之前子组件已经渲染完成。