vue父组件通过ref访问子组件的ref节点

您可以通过以下步骤在 Vue 父组件中访问子组件的 ref 节点：

1. 在子组件上添加 ref 属性。在子组件的模板中，使用 `ref` 属性给子组件添加一个唯一的名称，例如 `<ChildComponent ref="childRef"></ChildComponent>`。

2. 在父组件中使用 `$refs` 访问子组件的 ref 节点。在父组件的方法或生命周期钩子中，可以使用 `this.$refs` 来访问子组件的 ref 节点。例如，`this.$refs.childRef` 将返回子组件的实例，然后您可以通过该实例访问子组件的属性和方法。

下面是一个简单的示例：

<template>
  <div>
    <ChildComponent ref="childRef"></ChildComponent>
    <button @click="accessChildRef">访问子组件的 ref</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    accessChildRef() {
      // 访问子组件的 ref 节点
      const childRefNode = this.$refs.childRef.$el; // 这里假设子组件有一个名为 $el 的属性
      console.log(childRefNode); // 打印子组件的 DOM 节点
    }
  }
}
</script>

在上面的示例中，父组件通过 `this.$refs.childRef` 访问到子组件的实例，然后使用 `. $el` 访问子组件实例的 DOM 节点。您可以根据自己的需求修改访问子组件 ref 节点的代码。