當(dāng)我們需要使用可拖拽組件的時候，Vue-Drags就是一個非常好用的工具。其中，獲取組件是其中一個需要掌握的功能，下面將介紹如何在Vue-Drags中獲取組件。

首先，在Vue-Drags中，每個組件都有一個獨一無二的id屬性，我們可以通過綁定該屬性來獲取想要的組件。例如：

<template>
<draggable>
<div v-for="item in items" :key="item.id" :data-id="item.id">
{{ item.text }}
</div>
</draggable>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" }
]
};
}
};
</script>

在上面的代碼中，我們給每個div綁定了一個data-id屬性，這個屬性的值就是我們需要獲取的組件的id。在JS代碼中，我們可以使用draggable的API來獲取組件：

const draggable = document.querySelector('.draggable');
const item = draggable.querySelector(`[data-id="${itemId}"]`);

其中，.draggable是我們拖拽容器的CSS選擇器，itemId是我們想要獲取的組件的id

除了使用id獲取組件，我們也可以通過ref引用來獲取組件。例如：

<template>
<draggable v-model="list" ref="draggable">
<div v-for="(item, index) in list" :key="item.id">{{ item.content }}</div>
</draggable>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, content: 'Item 1' },
{ id: 2, content: 'Item 2' },
{ id: 3, content: 'Item 3' }
]
}
},
methods: {
handleDragEnd(evt) {
const draggingItem = this.$refs.draggable.realList[evt.oldIndex]
console.log(draggingItem)
}
}
}
</script>

在上面的代碼中，我們給draggable組件添加了一個ref屬性值為"draggable"。在JS代碼中，我們可以通過this.$refs來獲取組件，并且拿到組件對象后，可以使用其中的realList屬性來獲取真正的數(shù)組數(shù)據(jù)。例如，我們可以在handleDragEnd方法中獲取拖拽結(jié)束的組件對象：

const draggingItem = this.$refs.draggable.realList[evt.oldIndex]

這里的evt.oldIndex是一個事件對象，通過它我們可以得到拖拽結(jié)束的組件在數(shù)組中的下標(biāo)。

上面介紹了通過id和ref來獲取Vue-Drags組件的方法，希望對大家有所幫助。