是否可能从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,但是在这种情况下你会怎么做呢?
据我所知和生命周期文档所述,由于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: /* ... */ }))
},
}