Vue.js this. $refs, this.$ router, this.$route 通过Vue 2 Composition API访问

在本文中，我们将介绍使用Vue 2 Composition API时如何通过this. $refs，this.$ router和this.$route来访问DOM元素和路由信息。Vue.js是一个流行的JavaScript框架，它提供了简单且强大的工具来构建用户界面。Composition API是Vue.js的新特性，可以提高代码的可读性和可维护性。

阅读更多：Vue.js 教程

使用this.$refs访问DOM元素

使用this.$refs可以访问Vue组件中的DOM元素。在Vue 2 Composition API中，使用ref函数来声明一个ref。下面是一个示例：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.log(myRef.value); // 访问DOM元素
    });

    return {
      myRef
    };
  }
};

在示例中，我们使用ref函数创建了一个ref，并在组件的setup函数中将其声明。然后，我们使用onMounted钩子在组件挂载后访问DOM元素。通过myRef.value，我们可以访问到DOM元素。

使用this. $router和this.$ route访问路由信息

在Vue 2 Composition API中，可以通过useRouter和useRoute函数来访问路由信息。

import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    console.log(router.currentRoute.value.path); // 访问当前路由路径
    console.log(route.params.id); // 访问路由参数

    return {
      router,
      route
    };
  }
};

在上面的示例中，我们使用useRouter函数获取router对象，然后通过router.currentRoute.value.path访问当前路由的路径。同时，我们使用useRoute函数获取route对象，通过route.params.id访问路由参数。