Vue 获取自定义属性的值

可以使用 `getAttribute` 方法来获取元素的自定义属性值。例如，如果你有一个自定义属性 `data-id`，可以使用以下代码来获取其值：

var element = document.getElementById('my-element');
var id = element.getAttribute('data-id');

如果你在 Vue 组件中使用，可以使用 `$refs` 来获取元素的引用，然后通过引用来获取自定义属性的值。例如：

<template>
  <div ref="myElement" data-id="123">My Element</div>
</template>

<script>
export default {
  mounted() {
    var element = this.$refs.myElement;
    var id = element.getAttribute('data-id');
    console.log(id); // 输出 123
  }
}
</script>

相关问题

vue获取自定义属性值

在Vue中获取自定义属性值有两种方法：
方法一：通过操作DOM来获取自定义属性值。可以使用`this.$refs`来获取具有`ref`属性的元素，然后通过`dataset`来获取自定义属性的值。例如：

<selectBrand(e) {
  console.log(this.$refs.dataSelf.dataset.index); // 获取到循环中的下标值
}

方法二：通过事件对象来获取自定义属性值。可以使用`e.target.getAttribute`方法来获取自定义属性的值。例如：

<selectBrand(e) {
  console.log(e.target.getAttribute('show')); // 获取到循环中的IsShow的值
}

可以根据具体的需求选择使用其中的一种方法来获取自定义属性值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue自定义属性的设置及获取](https://blog.csdn.net/MYTLJP/article/details/100038411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue如何获取自定义元素属性参数值的方法](https://blog.csdn.net/coldriversnow/article/details/124143065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue3 获取自定义组件某个属性值集合

在 Vue3 中，可以通过 `refs` 来获取自定义组件实例，然后访问组件的属性值。具体操作如下：

1. 在自定义组件中定义需要获取的属性值，并通过 `setup()` 函数返回。

<template>
  <div>
    <my-custom-component ref="myComponent" />
  </div>
</template>

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

export default {
  components: {
    MyCustomComponent
  },

  setup() {
    const myComponent = ref(null)

    onMounted(() => {
      console.log(myComponent.value.customAttribute)
    })

    return {
      myComponent
    }
  }
}
</script>

2. 在父组件中通过 `refs` 获取自定义组件实例，并访问组件的属性值。

<template>
  <div>
    <my-custom-component ref="myComponent" />
  </div>
</template>

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

export default {
  components: {
    MyCustomComponent
  },

  mounted() {
    const myComponent = this.$refs.myComponent
    console.log(myComponent.customAttribute)
  }
}
</script>

注意，如果要在自定义组件中获取父组件中的属性值，可以通过 `provide` 和 `inject` 进行跨层级传递，具体可以参考 Vue3 官方文档。