vue3 获取ref取不到值

• 我现在使用的是vue3的组合式api，我想获取dom上某个元素的dataset的值，怎么写

在 Vue 3 的组合式 API 中，要获取 DOM 元素的 dataset 属性值，你可以使用 ref 来引用 DOM 元素，并在合适的生命周期钩子中（如 onMounted）操作它。这里是一个示例，展示如何获取 DOM 元素的 dataset 值并在组合式 API 中使用。

示例代码

组件模板

<template>
  <div>
    <!-- 假设按钮上有一些自定义数据属性 -->
    <button ref="myButton" data-name="example" data-id="123">Click Me</button>
    <p>Data Name: {{ dataName }}</p>
    <p>Data ID: {{ dataId }}</p>
  </div>
</template>

组件脚本

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

// 创建一个 ref 来引用 DOM 元素
const myButton = ref(null);

// 创建响应式数据来存储 dataset 的值
const dataName = ref('');
const dataId = ref('');

// 在组件挂载后操作 DOM 元素
onMounted(() => {
  if (myButton.value) {
    // 访问 DOM 元素的 dataset 属性并存储到响应式数据中
    dataName.value = myButton.value.dataset.name;
    dataId.value = myButton.value.dataset.id;
  }
});
</script>

<style>
/* 你的样式 */
</style>

解释

1. 引用 DOM 元素：

   • 使用 ref 函数创建一个引用 myButton，初始值为 null。
   • 在模板中，使用 ref="myButton" 将按钮元素绑定到这个引用。

2. 响应式数据：

   • 创建响应式数据 dataName 和 dataId，用于存储 dataset 的值。

3. 生命周期钩子：

   • 使用 onMounted 生命周期钩子，在组件挂载后执行操作。
   • 在 onMounted 回调中，检查 myButton.value 是否存在。

4. 访问和存储 dataset 属性：

   • 使用 myButton.value.dataset 访问 DOM 元素上的自定义数据属性。
   • 将 dataset 属性存储到响应式数据 dataName 和 dataId 中。

通过这种方式，你可以在 Vue 3 的组合式 API 中获取 DOM 元素的 dataset 属性，并将其存储在响应式数据中以便在模板中使用。这种方法确保了在正确的时机（即 DOM 已经渲染完成后）进行操作，并且使得数据响应式地更新和展示。