如何在parent组件定义中访问其嵌套元素？

当然可以，Vue 提供了**插槽（Slot）**机制来实现父组件嵌套内容与<parent>组件的交互，下面针对两种场景分别说明实现方式：

场景1：嵌套内容为文本节点 #

<parent>
  child
</parent>

在Parent组件内部，你可以通过默认插槽接收并访问这段文本：

<!-- Parent.vue -->
<template>
  <div>
    <!-- 直接渲染插槽文本 -->
    <slot></slot>
    <!-- Vue 2 中通过$slots访问文本内容 -->
    <p>获取到的文本：{{ $slots.default[0].text }}</p>
    <!-- Vue 3 中通过$slots.default()获取VNode数组，进而拿到文本 -->
    <p>获取到的文本：{{ $slots.default()[0].children }}</p>
  </div>
</template>

场景2：嵌套内容为子组件 #

<parent>
  <child />
</parent>

同样通过插槽接收，还可以获取子组件的实例进行操作：

Vue 2 实现 #

<!-- Parent.vue -->
<template>
  <div>
    <!-- 给插槽内的子组件绑定ref -->
    <slot>
      <child ref="childComponent" />
    </slot>
    <button @click="logChildInstance">查看子组件实例</button>
  </div>
</template>

<script>
export default {
  methods: {
    logChildInstance() {
      // 直接通过$refs拿到child组件的实例
      console.log(this.$refs.childComponent)
    }
  }
}
</script>

Vue 3 组合式API实现 #

<!-- Parent.vue -->
<template>
  <div>
    <slot ref="childSlot"></slot>
    <button @click="logChildInstance">查看子组件实例</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const childSlot = ref(null)

function logChildInstance() {
  // 从插槽的VNode中获取子组件实例
  const childVNode = childSlot.value.default()[0]
  console.log(childVNode.component)
}
</script>

核心要点 #

• 无论是文本还是子组件，都依赖Vue的插槽机制传递内容
• 通过$slots可以直接访问插槽对应的VNode节点，进而读取内容或获取组件实例
• 对于子组件，结合ref可以更便捷地获取其实例，调用其方法或访问属性

内容的提问来源于stack exchange，提问作者Isfaaq