vue3.0 通过ref 动态绑定与获取 dom

最新推荐文章于 2024-07-02 08:12:46 发布

依赖_赖

最新推荐文章于 2024-07-02 08:12:46 发布

阅读量1.6k

点赞数

分类专栏： vue JavaScript+css+html 文章标签： javascript vue3 ref

本文链接：https://blog.csdn.net/weixin_39150852/article/details/131677850

版权

JavaScript+css+html 同时被 2 个专栏收录

82 篇文章 2 订阅

订阅专栏

vue

43 篇文章 2 订阅

订阅专栏

文章讲述了在Vue.js应用中遇到的问题，即使用v-for渲染列表并给每个BarChart组件动态绑定ref，在本地运行正常，但在打包上线后出现ref获取不到的情况。解决方案是通过动态绑定attribute属性和ref，以及创建一个设置ref的函数，将每个组件实例存储在一个对象中，然后遍历该对象来调用组件方法。

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

html写法

<li
    v-for="item in Overview.config"
    :key="item.value"
>
	<BarChart
      :ref="item.value+'ChartRef'"
      style="height: 120px"
      :ids="item.value"
	/>
</li>

数据

Overview = {
	data: [],
	config: [{
      value: 'cellNumber',
      title: '小区数',
      color: ['#7FB9ED', '#1E88E5'],
      unit: '个'
    },
    {
      value: 'energySavingCell',
      title: '节能小区数',
      color: ['#7FB9ED', '#1E88E5'],
      unit: '个'
    },
    {
      value: 'saveEnergy',
      title: '节省能耗',
      color: ['#E35500', '#FF8A00'],
      unit: 'kW·h'
    }]
}

定义ref并赋值

const cellNumberChartRef = ref(null)
const energySavingCellChartRef = ref(null)
const saveEnergyChartRef = ref(null)

调用组件方法

cellNumberChartRef.value[0].drawCharts({
     data: Overview.data,
     config: Overview.config.find(item => item.value === 'cellNumber')
})
energySavingCellChartRef.value[0].drawCharts({
     data: Overview.data,
     config: Overview.config.find(item => item.value === 'energySavingCell')
})
saveEnergyChartRef.value[0].drawCharts({
     data: Overview.data,
     config: Overview.config.find(item => item.value === 'saveEnergy')
})

以上写法在本地运行时可以正常展示，但打包上线后要报错，表示获取不到ref，即xxxChartRef.value[0] is undefined

解决办法：通过动态绑定 attribute属性及ref绑定函数实现动态ref
html写法

<li
    v-for="item in Overview.config"
    :key="item.value"
>
	<BarChart
      :ref="setChartRef"
      style="height: 120px"
      :ids="item.value"
      :ref="setChartRef"
	/>
</li>

定义ref并赋值

const chartRefs = {}
const setChartRef = el => {
  if (el && el.$attrs.name) {
    chartRefs[el.$attrs.name] = el
  }
}

调用组件方法

for (const key in chartRefs) {
    Overview.totalData[key] && chartRefs[key].drawCharts({
       data: Overview.data,
       config: Overview.config.find(item => item.value === key)
    })
}