1. vue 如何获取点击元素上面的自定义属性
在Vue.js中，你可以通过多种方式来获取点击元素上的自定义属性。
这里有一些常用的方法：
1.1. 使用 v-bind 和 ref：
你可以在元素上使用v-bind绑定自定义属性，并使用ref属性给元素一个引用。
然后，在Vue实例的methods或者computed属性中，你可以通过this.$refs访问到这个元素，并读取其自定义属性。
<div ref="myElement" :my-custom-attr="someValue">Click me</div>
methods: {
getCustomAttr() {
const element = this.$refs.myElement;
console.log(element.getAttribute('my-custom-attr'));
}
}1.2. 直接在事件处理器中获取：
当你为元素绑定一个点击事件处理器时，你可以直接在该处理器函数中使用$event.target来获取触发事件的元素，并读取其自定义属性。
<div @click="getCustomAttr" :my-custom-attr="someValue">Click me</div>
methods: {
getCustomAttr(event) {
const element = event.target;
const customAttr = element.getAttribute('my-custom-attr');
console.log(customAttr);
}
}1.3. 使用 v-on 的简写 @ 绑定事件：
如果你只是想在事件处理器中获取自定义属性的值，你可以直接在事件处理器中使用:my-custom-attr。
<div @click="getCustomAttr" :my-custom-attr="someValue">Click me</div>
methods: {
getCustomAttr(event) {
const customAttr = event.currentTarget.getAttribute('my-custom-attr');
console.log(customAttr);
}
}1.4. 使用计算属性和侦听器：
如果你需要频繁地访问这个自定义属性，可以考虑使用计算属性来缓存这个值，同时使用侦听器监听自定义属性的变化。
<div ref="myElement" :my-custom-attr="someValue">Click me</div>
data() {
return {
someValue: 'initial value'
};
},
computed: {
customAttr() {
return this.$refs.myElement.getAttribute('my-custom-attr');
}
},
watch: {
someValue(newVal) {
// 更新自定义属性值时的逻辑
}
}请注意，当使用getAttribute时，你需要确保属性名是符合DOM属性命名规范的，比如将-替换为data-my-custom-attr这样的形式。
在Vue模板中，你可以使用驼峰式命名法(myCustomAttr)，但在JavaScript中，你可能需要使用kebab-case(my-custom-attr)或者data-my-custom-attr形式来匹配DOM属性。
在Vue 3中，你还可以使用setup函数和ref或reactive来实现类似的功能。
2. vue3 如何获取点击元素上面的自定义属性
在Vue 3中，获取点击元素上的自定义属性与Vue 2类似，但Vue 3引入了组合API（Composition API），提供了更灵活的方式来处理组件状态和事件。
下面是如何在Vue 3中使用组合API获取点击元素的自定义属性：
2.1. 使用 ref 和 onMounted:
首先，你需要使用ref来创建一个响应式的引用，用于存储元素的引用。
然后在onMounted钩子中，你可以获取元素并读取其自定义属性。
<template>
<div ref="myElement" :my-custom-attr="someValue">Click me</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const myElement = ref(null);
const someValue = ref('initial value');
onMounted(() => {
const element = myElement.value;
console.log(element.getAttribute('my-custom-attr'));
});
</script>2.2. 在事件处理器中获取属性：
你也可以在事件处理器中直接访问event.currentTarget来获取元素和其自定义属性。
<template>
<div @click="getCustomAttr" :my-custom-attr="someValue">Click me</div>
</template>
<script setup>
import { ref } from 'vue';
const someValue = ref('initial value');
const getCustomAttr = (event) => {
const customAttr = event.currentTarget.getAttribute('my-custom-attr');
console.log(customAttr);
};
</script>2.3. 使用 useEventListener 自定义组合函数：
如果你经常需要处理DOM事件，你可以创建一个自定义的组合函数 useEventListener来封装这个逻辑。
// useEventListener.js
export default function useEventListener(targetRef, eventName, callback) {
const handler = (event) => {
callback(event);
};
onMounted(() => {
const target = targetRef.value;
if (target) {
target.addEventListener(eventName, handler);
}
});
onBeforeUnmount(() => {
const target = targetRef.value;
if (target) {
target.removeEventListener(eventName, handler);
}
});
}然后在你的组件中使用这个函数：
<template>
<div ref="myElement" :my-custom-attr="someValue">Click me</div>
</template>
<script setup>
import { ref } from 'vue';
import useEventListener from './useEventListener.js';
const someValue = ref('initial value');
const myElement = ref(null);
const getCustomAttr = (event) => {
const customAttr = event.currentTarget.getAttribute('my-custom-attr');
console.log(customAttr);
};
useEventListener(myElement, 'click', getCustomAttr);
</script> 这些方法可以帮助你在Vue 3中获取元素的自定义属性。
