给el-popover设置ref,利用this.$refs进行操作,this.$refs打印出来始终都是undefined,放在 Vue.nextTick() 方法中也没用
时间: 2023-08-14 18:30:59 浏览: 227
如果在 Vue.nextTick() 方法中也无法访问 $refs 属性,那么可能是因为 el-popover 组件是通过 v-if 或 v-show 等指令进行条件渲染的,导致组件未被创建时无法访问 $refs 属性。解决方法是等待条件渲染完成后再访问 $refs 属性。您可以在 el-popover 的 visible-change 事件中访问 $refs 属性,如下所示:
```
<template>
<el-popover ref="myPopover" v-model="visible" @visible-change="onVisibleChange">
<p>这是一段内容</p>
<p>这是一段内容</p>
<p>这是一段内容</p>
<div slot="reference">触发Popover的按钮</div>
</el-popover>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
methods: {
onVisibleChange(visible) {
if (visible) {
this.$nextTick(() => {
console.log(this.$refs.myPopover) // 不再是 undefined
})
}
}
}
}
</script>
```
在这个示例中,我们在 el-popover 的 visible-change 事件中访问 $refs 属性,并在组件渲染完成后再进行操作。注意,我们需要先判断 visible 的值是否为 true,因为只有当 el-popover 显示时才会被渲染。
阅读全文