vue3.2获取元素

在Vue 3.2中，可以使用 `ref` 来获取DOM元素或组件实例。

示例代码：

<template>
  <div>
    <div ref="myElement">这是一个DOM元素</div>
    <MyComponent ref="myComponent">这是一个组件</MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  mounted() {
    const myElement = this.$refs.myElement // 获取DOM元素
    const myComponent = this.$refs.myComponent // 获取组件实例
    console.log(myElement, myComponent)
  }
}
</script>

在 `mounted` 生命周期钩子中，通过 `this.$refs` 可以获取到 `ref` 属性为 `myElement` 和 `myComponent` 的元素和组件实例。注意，`ref` 属性只能用在组件和元素上，不能用在模板语句或 v-for 循环上。

相关问题

vue3.2获取组件实例

在Vue3.2中，可以使用`ref`和`getCurrentInstance`来获取组件实例。具体步骤如下：

1. 在组件中使用`ref`定义一个变量，例如`myComponent`。
2. 在组件的`setup`函数中，使用`getCurrentInstance`获取当前组件实例，并将其赋值给`myComponent`。
3. 现在就可以通过`myComponent.value`来访问组件实例了。

以下是示例代码：

<template>
  <div>My Component</div>
</template>

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

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

    // 获取组件实例
    myComponent.value = getCurrentInstance();

    // 访问组件实例
    console.log(myComponent.value.props);

    return {};
  }
};
</script>

vue3.2获取当前路由参数

在 Vue 3.2 中，你可以使用 `useRoute` 来获取当前路由参数。具体步骤如下：

1. 在组件中导入 `useRoute`：

import { useRoute } from 'vue-router';

2. 在组件中调用 `useRoute` 获取当前路由参数：

export default {
  setup() {
    const route = useRoute();
    console.log(route.params); // 打印当前路由参数
  }
}

在上面的代码中，`useRoute` 函数返回一个 `route` 对象，其中包含当前路由的各种信息，例如 `params`、`query` 等。你可以使用 `route.params` 来获取当前路由参数。