使用 Vue 2 Composition API 访问 this.$refs、this.$router、this.$route

Question

您能告诉我如何访问Vue 2 Composition API 设置函数中的this.$refs, this.$router,吗？this.$route有提到的解决方案，context.$root但$root不再可用context。请帮忙。

我正在使用带有 Composition API 插件的 Vue 2。似乎useRoute或useRouters不支持Vue 2路由器版本。useRoute并且useRouters可与 Vue-router v4 一起使用。

Answer 1

您可以从其模块导入路由器并从其访问router两者。route

Refs 的使用方式与 Vue 3 中相同：

import { ref, onMounted } from "@vue/composition-api";   // import ref, onMounted
import router from "@/router";                           // import router

export default {
  setup() {
    console.log(router);                                 // this.$router
    console.log(router.app.$route);                      // this.$route

    const myref = ref(null);                             // create ref
    onMounted(() => {
      console.log(myref);                                // this.$refs.myref
    });

    return { myref };                                    // return for template ref
  },
};