Vue中使用ref（$refs未定义underfined）

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