穿梭框组件的封装（vue3+ts）

qq_45724120

已于 2022-08-19 22:14:31 修改

阅读量841

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-08-16 14:29:07 首次发布

本文链接：https://blog.csdn.net/qq_45724120/article/details/126361785

版权

本文详细记录了使用Vue3和TypeScript封装穿梭框组件的过程，包括组件大体框架、数据定义、组件传值（父传子、子传父）、数据绑定和功能实现（如可拖拽、添加、全选添加、查询、左侧回车事件）。通过实例展示了如何在前端开发中实现这一常用组件。

摘要由CSDN通过智能技术生成

穿梭框组件的实现

穿梭框组件笔记整理（vue3+ts）

穿梭框组件笔记整理（vue3+ts）

组件大体框架

<template>
  <div> jmx </div>
</template>

<script lang="ts">
  // import dragTransfer from '../tranferComponent/dragTransfer.vue';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    components: {
      // dragTransfer,
    },
    setup() {
      let list = ref<{}>({});
      return {
        list,
      };
    },
  });
</script>
<style scoped>
</style>

数据定义

数值

 const SliderLength = ref<number>(40); //左边滑动条长度

数组

const processPoint = ref<any[]>([]);

在这里插入图片描述

对象

  let list = ref<{}>({});

布尔值

      const SwitchChecked = ref<boolean>(true);

组件传值

父组件（用子组件）

<template>
  <div>jmx的组件 </div>
  <transfer-component :type1="list" :type2="list2" />
</template>

<script lang="ts">
  import TransferComponent from '../tranferComponent/index.vue';
  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    components: {
      TransferComponent,
    },
    setup() {
      let list = ref<{}>({});
      let list2 = ref<{}>({});

      return {
        list,
        list2,
      };
    },
  });
</script>