Vue 基础面试题, 如何访问 Vue 子组件的实例或子元素?
Vue 基础面试题, 如何访问 Vue 子组件的实例或子元素?
QA
Step 1
Q:: 如何访问 Vue 子组件的实例或子元素？
A:: 在 Vue 中，可以通过 ref 属性来访问子组件的实例或子元素。对于子组件实例，可以在父组件中使用 $refs 访问。例如：<child-component ref="child"></child-component>，然后在父组件的代码中通过 this.$refs.child 来访问子组件的实例。对于 DOM 元素，可以通过类似的方式使用 $refs。例如：<div ref="myDiv"></div>，然后在父组件中通过 this.$refs.myDiv 访问这个 DOM 元素。这种方式在需要直接操作子组件或元素时非常有用，例如调用子组件的方法或操作元素的属性。
Step 2
Q:: 在 Vue 3 中，如何访问子组件实例？
A:: 在 Vue 3 中，仍然可以使用 ref 和 $refs 访问子组件实例。但是，在组合式 API（Composition API）中，还可以使用 setup 函数中的 ref 和 onMounted 钩子来访问子组件实例。例如：const childComponentRef = ref(null)，然后在 onMounted 中通过 childComponentRef.value 访问子组件实例。
Step 3
Q:: 如何在 Vue 中动态添加或删除 ref？
A:: 在 Vue 中，你不能直接动态添加或删除 ref，因为 ref 是基于模板渲染的。如果你需要动态地处理 ref，可以考虑使用 v-if 或 v-for 来控制元素的存在，从而间接地控制 ref。
Step 4
Q:: 使用 ref 访问的元素或组件何时会变为 undefined？
A:: 当 Vue 组件被销毁或 DOM 元素被移除时，ref 指向的对象会变为 undefined。因此，在销毁或移除操作后再访问对应的 ref 时，需要进行 undefined 检查，以防止错误。