Vue 中如何获取自定义属性

在 Vue 开发过程中，获取自定义属性是一个常见的需求。无论是为了传递额外的数据，还是实现特定的功能逻辑，掌握获取自定义属性的方法都十分关键。

在 Vue 模板中，给元素添加自定义属性非常简单。例如，有一个 <div> 元素，我们可以这样添加自定义属性：<div v-bind:data - myattr="customValue" id="myDiv">这是一个示例 div</div>。这里通过 v - bind 指令将 customValue 绑定到了 data - myattr 这个自定义属性上。

在 Vue 实例中获取自定义属性，有几种不同的场景。

如果是在模板的表达式中获取，可以直接使用 $el 来访问 DOM 元素及其属性。例如在一个方法中：

methods: {
    getCustomAttr() {
        const div = this.$el.querySelector('#myDiv');
        const customAttrValue = div.dataset.myattr;
        console.log(customAttrValue);
    }
}

这里通过 this.$el 获取当前 Vue 实例的根 DOM 元素，再使用 querySelector 找到特定的元素，然后通过 dataset 属性来获取自定义属性的值。注意，在使用 dataset 时，属性名的写法要遵循驼峰命名法，原本的 data - myattr 在这里写成 myattr。

在生命周期钩子函数中获取自定义属性也是类似的方式。比如在 mounted 钩子函数里：

mounted() {
    const div = this.$el.querySelector('#myDiv');
    const customAttrValue = div.dataset.myattr;
    console.log(customAttrValue);
}

这样在组件挂载完成后，就可以获取到自定义属性的值。

另外，如果是在自定义指令中获取自定义属性，可以在指令的钩子函数中通过 el 参数来操作。例如：

Vue.directive('myDirective', {
    bind(el, binding) {
        const customAttrValue = el.dataset.myattr;
        console.log(customAttrValue);
    }
});

通过这些方法，在 Vue 中获取自定义属性变得相对容易。无论是简单的页面交互，还是复杂的业务逻辑处理，都能够灵活地运用自定义属性来传递和获取所需的数据，为 Vue 项目的开发提供了更多的便利和扩展性，帮助开发者更高效地构建功能丰富的应用程序。