vue3 conponent动态组件切换后自动跳到最顶端

在Vue3中，如果我们要实现组件动态切换后自动跳到最顶端，可以使用`scrollIntoView`方法来实现。

首先，在需要切换的组件上，我们可以为其添加一个`ref`引用，用于在切换后获取组件的DOM元素，并执行滚动操作。例如：

<template>
  <div ref="componentRef">
    <!-- 组件内容 -->
  </div>
</template>

然后，在切换组件的地方，可以使用`v-if`或`v-show`指令来控制组件的显示与隐藏。当切换组件时，我们可以通过监听组件的显示状态，在组件显示后执行滚动操作。例如：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>

    <div v-if="showComponent">
      <Component ref="dynamicComponent" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showComponent = ref(false);

    const toggleComponent = () => {
      showComponent.value = !showComponent.value;
    };

    return {
      showComponent,
      toggleComponent,
    };
  },

  watch: {
    showComponent: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.$refs.dynamicComponent.$el.scrollIntoView({
              behavior: 'smooth',
              block: 'start',
            });
          });
        }
      },
    },
  },
};
</script>

在上述代码中，我们使用了Vue3的`ref`函数来创建了一个`showComponent`的响应式变量来控制组件的显示与隐藏。在`toggleComponent`的点击事件中，我们通过改变`showComponent`的值来切换组件。

在watch选项中，我们监听了`showComponent`的变化，并且在组件显示后使用`scrollIntoView`方法将组件滚动到最顶端。为了确保DOM已经更新，我们使用`this.$nextTick`进行操作。

通过以上的方式，我们可以在Vue3中使用组件动态切换后自动滚动到最顶端。