vue3怎么获取其他组件的div

在 Vue 3 中，可以使用 `ref` 和 `teleport` 来获取其他组件的 DOM 元素。

使用 `ref` 可以在组件中创建一个引用，然后通过该引用访问组件中的 DOM 元素。例如：

<template>
  <div>
    <child ref="childComponent"></child>
    <button @click="handleClick">获取子组件的 div</button>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    handleClick() {
      const childDiv = this.$refs.childComponent.$el.querySelector('div');
      console.log(childDiv);
    },
  },
};
</script>

在上面的例子中，我们使用 `ref` 创建了一个名为 `childComponent` 的引用，然后在 `handleClick` 方法中通过该引用访问了子组件中的 `div` 元素。

如果要在当前组件的模板中使用子组件的 DOM 元素，可以使用 `teleport`。例如：

<template>
  <div>
    <teleport to="child-div">
      <child></child>
    </teleport>
    <button @click="handleClick">获取子组件的 div</button>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  methods: {
    handleClick() {
      const childDiv = this.$el.querySelector('#child-div');
      console.log(childDiv);
    },
  },
};
</script>

在上面的例子中，我们使用 `teleport` 将子组件的内容传送到名为 `child-div` 的目标位置，然后在 `handleClick` 方法中通过 `$el` 访问了当前组件中的 `child-div` 元素。注意，这里使用了 `#` 符号指定了元素的 ID，因为 `teleport` 会在目标位置创建一个新的 `div` 元素，并将子组件的内容传送到这个元素中。