是否可以在组件中获取分配的引用名称?Vue.js

Question

我创建了一个新组件，它将使用 Chart.js 呈现图表。我想通过引用访问此组件。

<kpis-linechart name="inv-speed" ref="inv-speed-chart" :information="team.invoice_details">

使用 html 中的<canvas id="chart-id"></canvas>创建具有chart.js的图表。

我想为图表 ID 分配与 ref 值相同的值。

有没有办法从组件中获取引用名称？

例 ：this.$ref_name

这是我到目前为止的代码：

Vue.component('kpis-linechart',{
template : '#kpis-linechart-template',
props : {
information : Object,
name : String
},
// I WANT TO REPLACE THIS CODE IN ORDER TO GET THE REF NAME AS ID //
// I WANT TO REPLACE THIS CODE IN ORDER TO GET THE REF NAME AS ID //
computed : {
id_chart(){
return this.name + '-chart'
}
},

methods : {
updateChart(){
this.chart = new Chart(document.getElementById(this.id_chart),{
type : 'line',
data : {
labels : ['hola','como','estas'],
datasets : [
{
label : 'Queso',
data : [1,2,4]
}
]

}
})
}
},
mounted(){
this.updateChart()
console.log('CREATING CHART')
// console.log(this.information)
console.log(this)
}
})

Answer 1

最好的方法是添加一个该名称作为道具(因为ref不是作为道具传递的(：

<my-component ref="something" name="something" />

如果您不希望这样做，可以遍历父级的$refs并检查哪个引用this。但。。。这仅在组件已挂载时可用，因此它不能是computed。

演示：

Vue.component('kpis-linechart', {
template: '#kpis-linechart-template',
data() {
return {
id_chart: 'default-id'
};
},
mounted() {
const entry = Object.entries(this.$parent.$refs)
.find(([key, value]) => value === this);
if (entry) {
this.id_chart = entry[0];
}
}
});
var vm = new Vue({
el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
<kpis-linechart ref="something"></kpis-linechart>
</div>
<template id="kpis-linechart-template">
<p :id="id_chart">I'm a chart, and my id is "<b>{{id_chart}}</b>"</p>
</template>