vue3怎么获取元素的自定义属性

在Vue3中，你可以通过`v-bind`指令或者JavaScript直接访问元素的自定义属性。如果你想在模板中获取，可以使用`{{{}}}`表达式配合`this.$attrs`。例如：

<template>
  <div :data-custom-attr="customValue">{{ customValue }}</div>
</template>

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

const customValue = ref(null);
// 获取来自父组件的数据
Object.keys(this.$attrs).forEach(key => {
  if (key.startsWith('data-custom')) {
    customValue.value = this.$attrs[key];
  }
});
</script>

如果你是在JavaScript代码里动态设置或获取自定义属性，可以直接操作DOM元素的`dataset`对象：

const element = document.querySelector('#myElement');
element.dataset.myCustomAttr = 'value'; // 设置
const value = element.dataset.myCustomAttr; // 获取