穿梭框是Vue中的一個(gè)重要組件，可以讓用戶在兩個(gè)列表之間輕松移動(dòng)元素。穿梭框組件的屬性可以讓開(kāi)發(fā)者自定義框的外觀和行為，使其更適合項(xiàng)目需求。

其中一個(gè)重要的屬性是data，它是一個(gè)數(shù)組，包含了要展示在穿梭框中的元素。每個(gè)元素都有key和label屬性，其中key是必須的，用于唯一標(biāo)識(shí)元素，label則是用于顯示元素的名稱。data屬性可以通過(guò)v-bind指令綁定到父組件的數(shù)據(jù)中，從而使其可以在不同的組件中共享。

<template>
<transfer :data="list"></transfer>
</template>
<script>
export default {
data () {
return {
list: [
{ key: '1', label: '第一個(gè)元素' },
{ key: '2', label: '第二個(gè)元素' }
]
}
}
}
</script>

另一個(gè)重要的屬性是target-keys和selected-keys，它們分別用來(lái)指定已選和未選的元素。這兩個(gè)屬性都是數(shù)組，包含了data數(shù)組中元素的key。target-keys用于設(shè)置已選擇的元素，selected-keys則用于設(shè)置尚未選擇的元素。這些屬性也是可以綁定到父組件的數(shù)據(jù)中的。

<template>
<transfer :data="list" :target-keys="targetKeys"></transfer>
</template>
<script>
export default {
data () {
return {
list: [
{ key: '1', label: '第一個(gè)元素' },
{ key: '2', label: '第二個(gè)元素' },
{ key: '3', label: '第三個(gè)元素' },
{ key: '4', label: '第四個(gè)元素' }
],
targetKeys: ['1', '4']
}
}
}
</script>

除了基本的屬性外，還有一些其他的屬性可以用來(lái)自定義穿梭框。其中一個(gè)是filterable，它指定是否啟用搜索框。如果啟用了搜索框，用戶可以在列表中搜索元素。另一個(gè)重要的屬性是props，它可以指定元素的label和key屬性名稱。如果元素的名稱不是label，可以通過(guò)這個(gè)屬性指定名稱。這個(gè)屬性是一個(gè)對(duì)象，包含了兩個(gè)屬性：label和key。

<template>
<transfer :data="list" :filterable="true" :props="{ key: 'id', label: 'name' }"></transfer>
</template>
<script>
export default {
data () {
return {
list: [
{ id: '1', name: '第一個(gè)元素' },
{ id: '2', name: '第二個(gè)元素' }
]
}
}
}
</script>

除了這些屬性外，穿梭框還有很多其他的屬性，如titles，render-format，list-style，button-order等。這些屬性可以讓開(kāi)發(fā)者自定義穿梭框的外觀和行為，使其更適合項(xiàng)目需求。

總之，Vue中的穿梭框組件是一個(gè)非常強(qiáng)大的可重用組件，它可以讓用戶在兩個(gè)列表之間輕松移動(dòng)元素。通過(guò)自定義組件的屬性，開(kāi)發(fā)者可以輕松地自定義穿梭框的外觀和行為，以適應(yīng)不同的項(xiàng)目需求。