是否可以在Vue 2组件的数据部分使用ref访问HTML元素?

Question

是否可能从Vue(2.6.12)组件的data部分访问$refs?例如

flickingPlugins: [new Arrow({
prevElSelector: '.overview-arrow-prev',
nextElSelector: '.overview-arrow-next',
parentEl: this.$refs['overview-arrows'], // _this is undefined
})],

我问的原因是因为flickering滑块/carousel组件的要求。这个组件有一个额外的箭头插件，箭头出现在任意一端，以控制向左和向右滑动的内容。插件文档(第三个例子)提供了一个Vue示例，看起来像这样:

data() {
return {
plugins: [new Arrow({ parentEl: document.body })]
}
}

parentEl属性是一种指定自定义箭头控件元素的位置的方法，并且需要一个HTMLElement值。我总是被告知元素访问应该使用refs，但是在这种情况下你会怎么做呢?

Answer 1

据我所知和生命周期文档所述，由于Vue.js的设计，这是不可能的。

创建

[…在这个阶段，实例已经完成了对选项的处理，这意味着以下选项已经设置:数据观测，计算属性，[…]。但是，挂载阶段尚未启动，并且$el属性还不可用.

所以你必须等到你的组件已经挂载，以便访问元素和它的引用。

为什么不试试这样的方法:

{
// ...
data () {
// no access to $el and $refs
return {
plugins: []
}
},
mounted () {
// here you have access to $el and $refs
this.plugins.push(new Arrow({ parentEl: /* ... */ }))
},
}