1. 调用地方
ref是在渲染之后才出现的
- 可以在mounted里面调用
- 可以使用this.$nextTick(()=>{})里面调用
2. 调用对象
ref不是响应式的,所以动态加载模板更新,ref无法更新,以下情况是出现underfined
- 结合v-if使用 解决方案:使用
setTimeout(() => {}, 0)
使用v-for循环
子直接使用ref,当v-for数据源改变时,ref为underfined,如:
<div v-for="item in vforms">
<divv-for="(data, index) in item.formTemplates">
<template v-slot:content>
<v-form-render>
<!-- 补充信息 -->
<template v-slot:supplementaryInfo>
<form-extension ref="extension"></form-extension>
</template>
</v-form-render>
</template>
</div >
</div >
直接在ref=“extension”组件里面使用获取组件内容,首次是正常的,当更改数据v-for数据时,里面获取的ref直接为underfined。解决方法:
当前层级使用refs获取,this.$refs.extension[0],即可获取ref