Vue Transfer 组件是一个用于从一个列表中移动数据到另一个列表的交互组件。它可以用来创建类似“可选项”和“已选项”的界面，以方便用户进行选择。

使用 Vue Transfer 组件，需要在 Vue 实例中引入它，同时传入两个数组，一个作为左侧列表的数据，一个作为右侧列表的数据：

<template>
  <transfer :data="list" :targetkeys="targetkeys" :titles="['Source', 'Target']"></transfer>
</template>

<script>
import transfer from 'compnents/transfer';

export default {
  data() {
    return {
      targetkeys: [],
      list:[
        {
          key: '1',
          label: '选项一'
        },
        {
          key: '2',
          label: '选项二'
        },
        {
          key: '3',
          label: '选项三'
        },
        {
          key: '4',
          label: '选项四'
        },
        {
          key: '5',
          label: '选项五'
        }
      ]
    };
  },
  components: {
    transfer
  }
};
</script>

上面的代码中，我们引入了 Vue Transfer 组件，并将 list 数组作为左侧列表的数据传入组件。targetkeys 数组用于存储右侧列表选中的数据。

在实际应用中，我们需要在用户移动数据时返回选中的数据，此时可以使用 transfer-selected 事件监听用户选择操作：

<template>
  <transfer :data="list" :targetkeys="targetkeys" :titles="['Source', 'Target']" @transfer-selected="onSelected"></transfer>
</template>

<script>
import transfer from 'components/transfer';

export default {
  data() {
    return {
      targetkeys: [],
      list:[
        {
          key: '1',
          label: '选项一'
        },
        {
          key: '2',
          label: '选项二'
        },
        {
          key: '3',
          label: '选项三'
        },
        {
          key: '4',
          label: '选项四'
        },
        {
          key: '5',
          label: '选项五'
        }
      ]
    };
  },
  components: {
    transfer
  },
  methods: {
    onSelected(key, direction, movedKeys) {
      console.log(key, direction, movedKeys);
    }
  }
};
</script>

在上面的代码中，我们定义了一个名为 onSelected 的方法，用于在 transfer-selected 事件触发时打印出选中的数据。

Vue Transfer 组件拥有众多的配置参数，可以通过官方文档来深入了解。使用 Vue Transfer 组件，可以大大简化前端开发中选择数据的交互操作，提高用户体验。