Vue 父级获取子级子级元素内容 - $refs 深层访问

在Vue中，父组件可以通过$refs来访问子组件的DOM元素。但是，只能访问直接子组件的DOM元素，无法访问子组件的子组件的DOM元素。

例如，有一个父组件Parent包含一个子组件Child，而子组件Child又包含一个子组件Grandchild。如果想访问Grandchild的DOM元素，可以通过在Child组件中使用$refs来获取。

<template>
  <div>
    <child ref='child'></child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  mounted() {
    // 访问Grandchild的DOM元素
    console.log(this.$refs.child.$refs.grandchild.$el);
  }
};
</script>

在Child组件中，也需要使用$refs来获取Grandchild组件的DOM元素。

<template>
  <div>
    <grandchild ref='grandchild'></grandchild>
  </div>
</template>

<script>
import Grandchild from './Grandchild.vue';

export default {
  components: {
    Grandchild
  },
  mounted() {
    // 访问Grandchild的DOM元素
    console.log(this.$refs.grandchild.$el);
  }
};
</script>

这样，父组件就可以通过$refs来访问子组件的子组件的DOM元素了。