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

文章讲述了在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)
    })
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值