vue3到vue2组件重构方法笔记

这两天的任务是把一批做好的vue3组件放在vue2项目中使用，将组合式api分散开有一些零散的技巧，所以写一篇转化笔记以供大家参考

先上vue3一个组件的示例代码

<template>
  <div ref="GForms" :style="{background: props.background, border: '1px solid ' + props.borderColor, 'backdrop-filter': props.backBlur? 'blur(10px)': 'blur(0px)'}" style="min-width: 200px; min-height: 60px; padding: 0; margin: 0; position: relative; transition: width .8s, height .8s;">
    <!-- 四个角 -->
    <div v-if="!props.corner" :style="{background: props.cornerColor}" style="position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: 2px;"></div>
    <div v-if="props.corner" style="position: absolute; left: -1px; top: -1px; transform: rotateZ(0deg);">
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute;"></div>
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute; transform: rotateZ(90deg); left: -2px; top: 2px;"></div>
    </div>
    <div style="position: absolute; left: -1px; bottom: -1px; transform: rotateZ(270deg);">
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute;"></div>
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute; transform: rotateZ(90deg); left: -2px; top: 2px;"></div>
    </div>
    <div v-if="props.corner" style="position: absolute; right: -1px; top: -1px; transform: rotateZ(90deg);">
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute;"></div>
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute; transform: rotateZ(90deg); left: -2px; top: 2px;"></div>
    </div>
    <div style="position: absolute; right: -1px; bottom: -1px; transform: rotateZ(-180deg);">
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute;"></div>
      <div :style="{background: props.cornerColor}" style="width: 6px; height: 2px; position: absolute; transform: rotateZ(90deg); left: -2px; top: 2px;"></div>
    </div>
    <!-- 标题栏 @mouseup="gFormsMouseup" @mousemove="gFormsMousemove"-->
    <div v-if="props.showTitle" @mousedown="gFormsMousedown" :style="{cursor: props.move? 'move': 'default'}" style="user-select: none; padding: 4px 6px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;">
      <div style="margin-top: 2px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;">
        <div style="font-size: 16px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{props.title}}</div>
        <img :src="data.icon" alt="logo" style="margin: -3px 0 0 3px;"/>
      </div>
      <div @click.stop="gFormsCloseWindows" class="g-forms-close-btn" style="position: relative; width: 22px; height: 22px;">
        <div class="g-forms-close-btn-bg" style="position: relative; width: 20px; height: 20px; margin: 1px;">
          <div style="position: absolute; width: 14px; height: 2px; transform: rotateZ(45deg); transform-origin: center 50%; background: #fff; top: 9px; left: 3px;"></div>
          <div style="position: absolute; width: 14px; height: 2px; transform: rotateZ(-45deg); transform-origin: center 50%; background: #fff; top: 9px; left: 3px;"></div>
        </div>
        <div style="position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; background: #fff;"></div>
        <div style="position: absolute; left: -1px; bottom: -1px; width: 2px; height: 2px; background: #fff;"></div>
        <div style="position: absolute; right: -1px; top: -1px; width: 2px; height: 2px; background: #fff;"></div>
        <div style="position: absolute; right: -1px; bottom: -1px; width: 2px; height: 2px; background: #fff;"></div>
      </div>
    </div>
    <!-- 分割条 -->
    <div v-if="props.showTitle" style="display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 0 4px;">
      <div style="width: 90%; background: #4F728E; height: 3px;"></div>
      <div style="width: 10%; background: #DEE3E9; height: 3px; margin-left: 2px;"></div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
// 边框
import { defineProps, reactive, defineEmits, ref, onMounted } from 'vue'

const props = defineProps({
  title: { type: String, default: "G-Forms" }, // 窗口标题
  showTitle: { type: Boolean, default: true }, // 显示标题
  move: { type: Boolean, default: true }, // 是否可以移动
  inArea: { type: Boolean, default: true }, // 是否在区域内移动
  corner: { type: Boolean, default: true }, // 四个角是否为尖角
  cornerColor: { type: String, default: "#FFF" }, // 四角装饰颜色
  backBlur: { type: Boolean, default: true }, // 开启背景模糊
  background: { type: String, default: "#001820ab" }, // 背景颜色
  borderColor: { type: String, default: "#2F739A" }, // 边框线条颜色
})

const GForms = ref<HTMLElement | null>()
let gflag = ref(false)
const data = reactive({
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAZCAYAAAC2JufVAAABYElEQVRIx2P4//8/w2DDDKOOGnXUiHKUqW/cAyD+j4Qb5m478QCI/yPhBkrU/b/k+wCI/yPhBkKOckAz5H/5hEUpaJb9jy5uSSFX3bZFwSlojgJhA7zRB9Q4Ac2gC0ALJqBZeIESdUBHTEBz1AVCjhJAD3bHyKwO9OiZuGpPB7nqfGNjOghFI0Z8DoZoxJr6BzoacTlqQKMRZ1kB1JiAHuxACxLQo4cSdUBHJGBEI4GQ+oBsgFN0TiXQ8A/IFk1YsauSXHX+cTGVQEd8QHNUAT5HHUDz1Qag4QfQfL+BEnVABxxAc9AGfLmvAc2AB9M3HOpAs+iBdXBKB7nqPp/y60BzEChtCeAqpwLQDPhQN31lIZpFH0JyagvJVXdkdVAhmoM+oJfqyA5SQI/3oKzqEvT00TBzdQm56nKKIkuwpKMEfHXfBTRfLQCVMWi+X0CJOnBZhOqgBaPtqVFHjVhHAQDOW7xzUODHCgAAAABJRU5ErkJggg==",
  // 鼠标位置
  gfMX: 0,
  gfMY: 0,
  // 偏移量
  deltaX: 0,
  deltaY: 0,
  // 页面尺寸
  pageW: 0,
  pageH: 0
})

const emit = defineEmits(['close'])

onMounted(() => {
  data.pageW = window.innerWidth
  data.pageH = window.innerHeight
  window.onresize = () => {
    data.pageW = window.innerWidth
    data.pageH = window.innerHeight
  }
  if (data.deltaX != 0 || data.deltaY != 0) setPosition()
})

// 设置窗体位置
const setPosition = () => setTimeout(() => {
  if (GForms.value == null || GForms.value == undefined) return;
  if (props.inArea) {
    if (data.deltaX < 1) data.deltaX = 1
    if (data.deltaY < 80) data.deltaY = 80
    if (data.deltaX + GForms.value?.offsetWidth > data.pageW) data.deltaX = data.pageW - GForms.value?.offsetWidth
    if (data.deltaY + GForms.value?.offsetHeight > data.pageH) data.deltaY = data.pageH - GForms.value?.offsetHeight
  }
  GForms.value.style.top = data.deltaY + "px"
  GForms.value.style.left = data.deltaX + "px"
}, 0)

// 关闭方法
const gFormsCloseWindows = () => {
  emit('close')
}
// 窗体移动方法
const gFormsMousedown = (e:any) => {
  if (!props.move) return

  gflag.value = true
  data.gfMX = e.offsetX
  data.gfMY = e.offsetY
  // 防抖
  if (data.deltaX != 0 || data.deltaY != 0) setPosition()
  // 移动过程
  document.onmousemove = (e: any) => {
    if (!gflag.value) return;
    data.deltaX = e.clientX - data.gfMX
    data.deltaY = e.clientY - data.gfMY
    setPosition()
  }
  // 鼠标抬起
  document.onmouseup = (e: any) => {
    setPosition()
    gflag.value = false
    document.onmousemove = null
    document.onmouseup = null
  }
}


</script>

<style scoped>

.g-forms-close-btn-bg {
  background: #2E454C;
}
.g-forms-close-btn:hover .g-forms-close-btn-bg {
  background: #4b96a3;
  cursor: pointer;
}
.g-forms-close-btn:active .g-forms-close-btn-bg {
  background: #2E454C;
  cursor: pointer;
}

.div-l-shape-s {
  border-style: solid;
  border-width: 0 0 3px 3px;
  position: relative;
  right: -3px;
  top: -3px;
  background: white;
  width: 4em;
  height: 4em;
}
</style>

上面是其中一个vue3组件样式表，在vue3的项目中展示效果为下图所示：

组件中还有一些其他的功能都要完整保留，所以现在开始整理：

要将 Vue 3 组件转换为 Vue 2 组件，需要注意一些语法和功能上的差异。下面是我总结的 Vue 3 组件转换为 Vue 2 组件的一般步骤：
1、首先是template里的内容，可以看到在vue3模板里使用属性要这么写：

:style="{background: props.background}" //取出在props里面的值

在 Vue 3 中，使用 props 选项来声明组件的属性，而Vue 3 中的 props 默认是不响应式的，所以可以看到代码中套了一层defineProps方法，defineProps 方法是 Vue 3 中用于声明组件属性的函数。它的作用是定义组件接收的属性，并使其在组件内部成为响应式的。

而在vue2中可以直接使用props里面的值，语法为下面代码：

:style="{background: background}"

export default {
props: {
      title: { type: String, default: "G-Forms" }, // 窗口标题
      showTitle: { type: Boolean, default: true }, // 显示标题
      move: { type: Boolean, default: true }, // 是否可以移动
      inArea: { type: Boolean, default: true }, // 是否在区域内移动
      corner: { type: Boolean, default: true }, // 四个角是否为尖角
      cornerColor: { type: String, default: "#FFF" }, // 四角装饰颜色
      backBlur: { type: Boolean, default: true }, // 开启背景模糊
      background: { type: String, default: "#001820ab" }, // 背景颜色
      borderColor: { type: String, default: "#2F739A" }, // 边框线条颜色
    },
}

因为里面的数据都是可以直接使用的

2、在vue2中要去掉<script lang="ts" setup>里面的lang="ts" setup
书写vue2中的逻辑
删掉import { defineProps, reactive, defineEmits, ref, onMounted } from 'vue'这类语句因为不需要

3、在vue3中，data的书写方式为下面代码：

const data = reactive({
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAZCAYAAAC2JufVAAABYElEQVRIx2P4//8/w2DDDKOOGnXUiHKUqW/cAyD+j4Qb5m478QCI/yPhBkrU/b/k+wCI/yPhBkKOckAz5H/5hEUpaJb9jy5uSSFX3bZFwSlojgJhA7zRB9Q4Ac2gC0ALJqBZeIESdUBHTEBz1AVCjhJAD3bHyKwO9OiZuGpPB7nqfGNjOghFI0Z8DoZoxJr6BzoacTlqQKMRZ1kB1JiAHuxACxLQo4cSdUBHJGBEI4GQ+oBsgFN0TiXQ8A/IFk1YsauSXHX+cTGVQEd8QHNUAT5HHUDz1Qag4QfQfL+BEnVABxxAc9AGfLmvAc2AB9M3HOpAs+iBdXBKB7nqPp/y60BzEChtCeAqpwLQDPhQN31lIZpFH0JyagvJVXdkdVAhmoM+oJfqyA5SQI/3oKzqEvT00TBzdQm56nKKIkuwpKMEfHXfBTRfLQCVMWi+X0CJOnBZhOqgBaPtqVFHjVhHAQDOW7xzUODHCgAAAABJRU5ErkJggg==",
  // 鼠标位置
  gfMX: 0,
  gfMY: 0,
  // 偏移量
  deltaX: 0,
  deltaY: 0,
  // 页面尺寸
  pageW: 0,
  pageH: 0
})

但是在vue2中

data() {
      return {
        icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAZCAYAAAC2JufVAAABYElEQVRIx2P4//8/w2DDDKOOGnXUiHKUqW/cAyD+j4Qb5m478QCI/yPhBkrU/b/k+wCI/yPhBkKOckAz5H/5hEUpaJb9jy5uSSFX3bZFwSlojgJhA7zRB9Q4Ac2gC0ALJqBZeIESdUBHTEBz1AVCjhJAD3bHyKwO9OiZuGpPB7nqfGNjOghFI0Z8DoZoxJr6BzoacTlqQKMRZ1kB1JiAHuxACxLQo4cSdUBHJGBEI4GQ+oBsgFN0TiXQ8A/IFk1YsauSXHX+cTGVQEd8QHNUAT5HHUDz1Qag4QfQfL+BEnVABxxAc9AGfLmvAc2AB9M3HOpAs+iBdXBKB7nqPp/y60BzEChtCeAqpwLQDPhQN31lIZpFH0JyagvJVXdkdVAhmoM+oJfqyA5SQI/3oKzqEvT00TBzdQm56nKKIkuwpKMEfHXfBTRfLQCVMWi+X0CJOnBZhOqgBaPtqVFHjVhHAQDOW7xzUODHCgAAAABJRU5ErkJggg==",
        // 鼠标位置
        gfMX: 0,
        gfMY: 0,
        // 偏移量
        deltaX: 0,
        deltaY: 0,
        // 页面尺寸
        pageW: 0,
        pageH: 0,
        gflag:false,
        GFormsRef:0,
        gFormsMouseup: false,
      };
    },

利用函数式的data存放数据

4、const GForms = ref<HTMLElement | null>()
这是vue3组件中的一句代码，这句话的意思是创建一个响应式引用（ref），其初始值为 null，类型为 HTMLElement 或 null。

在 Vue 3 中，ref 是一个用于创建响应式数据的函数。它接受一个初始值作为参数，并返回一个包含 .value 属性的响应式引用对象。.value 属性用于访问和修改引用的值。当引用的值发生变化时，相关的组件会自动重新渲染。

在上述代码中，GForms 是一个名为 GForms 的变量，它是一个响应式引用。我们可以使用 GForms.value 来访问和修改它的值。在初始状态下，GForms.value 的值为 null。可以通过将其赋值为一个 HTMLElement 对象来将其引用到特定的 DOM 元素。

通过使用 ref 创建的响应式引用，可以轻松地追踪和响应 DOM 元素的变化，并在 Vue 3 组件中进行操作。

而在vue2中，这句话要被拆分为几部分
1、在组件的 data 选项中定义一个名为 GForms 的属性，并将其初始值设置为 null。例如：

data() {
  return {
    GForms: null,
  };
},

2、在模板中使用 ref 属性将 GForms 和相应的 DOM 元素进行绑定。例如：

<div ref="GForms">...</div>

3、在组件的生命周期钩子函数（例如 mounted）中，使用 $refs 来访问 GForms 引用的 DOM 元素，并将其赋值给组件的 GForms 属性。例如：

mounted() {
  this.GForms = this.$refs.GForms;
},

在这样的转换后，您可以在组件中使用 this.GForms 来访问和操作引用的 DOM 元素。

4、vue3传值

const emit = defineEmits(['close'])

在Vue 3中，const emit = defineEmits(['close'])这句话的作用是定义一个名为emit的常量，它使用defineEmits函数来声明组件的自定义事件。

defineEmits是Vue 3中的一个全局辅助函数，用于声明组件可以触发的自定义事件。通过传递一个字符串数组，你可以定义组件可以发出的事件名称。

在我的例子中，['close']是一个包含单个字符串'close'的数组，它表示组件可以触发名为'close'的自定义事件。通过使用defineEmits(['close'])，可以确保组件在使用$emit方法触发’close’事件时，不会产生警告。

在组件中，可以使用emit常量来触发声明的自定义事件，例如：

<script>
import { defineEmits } from 'vue';

const emit = defineEmits(['close']);

export default {
  methods: {
    handleClose() {
      // 触发 'close' 事件
      emit('close');
    },
  },
};
</script>

在上述代码中，handleClose方法通过调用emit('close')来触发’close’事件。这样，其他使用这个组件的地方可以监听该事件并执行相应的逻辑。
在我的代码中：

 <div @click.stop="gFormsCloseWindows"/>

点击触发gFormsCloseWindows函数，

const gFormsCloseWindows = () => {
  emit('close')
}

这样的话就可以在组件外的父组件上进行接收close，
在app组件中

@close="handleClose"

之后在data中定义

  data() {
    return {
      showChildComponent: true
    };
  },

在methods中定义

methods: {
    handleClose() {
      // 执行关闭操作
      this.showChildComponent = false;
    }
  }

前提是在gForm组件中要预留

v-if="showChildComponent"

就可以实现此功能

5、生命周期转化
在vue3中

onMounted(() => {
  data.pageW = window.innerWidth
  data.pageH = window.innerHeight
  window.onresize = () => {
    data.pageW = window.innerWidth
    data.pageH = window.innerHeight
  }
  if (data.deltaX != 0 || data.deltaY != 0) setPosition()
})

而在vue2中进行相应的转化

mounted() {
      this.pageW = window.innerWidth;
      this.pageH = window.innerHeight;
      window.onresize = () => {
        this.pageW = window.innerWidth;
        this.pageH = window.innerHeight;
      };
      if (this.deltaX !== 0 || this.deltaY !== 0) {
        this.setPosition();
      }
    },

6、methods转化
vue3代码示例

// 窗体移动方法
const gFormsMousedown = (e:any) => {
  if (!props.move) return

  gflag.value = true
  data.gfMX = e.offsetX
  data.gfMY = e.offsetY
  // 防抖
  if (data.deltaX != 0 || data.deltaY != 0) setPosition()
  // 移动过程
  document.onmousemove = (e: any) => {
    if (!gflag.value) return;
    data.deltaX = e.clientX - data.gfMX
    data.deltaY = e.clientY - data.gfMY
    setPosition()
  }
  // 鼠标抬起
  document.onmouseup = (e: any) => {
    setPosition()
    gflag.value = false
    document.onmousemove = null
    document.onmouseup = null
  }
}

转化为vue2

methods: {
      gFormsCloseWindows() {
        this.$emit('close');
      },
      // 设置窗体位置
        setPosition() {
          const GFormsRef = this.$refs.GForms;
            setTimeout(() => {
              if (this.GFormsRef == null || this.GFormsRef == undefined) return;
              // 在判断时应该使用 this.GFormsRef，而不是 this.GForms

              if (this.inArea) {
                if (this.deltaX < 1) this.deltaX = 1;
                if (this.deltaY < 1) this.deltaY = 1;
                if (this.deltaX + this.GFormsRef.offsetWidth > this.pageW) {
                  this.deltaX = this.pageW - this.GFormsRef.offsetWidth;
                }
                if (this.deltaY + this.GFormsRef.offsetHeight > this.pageH) {
                  this.deltaY = this.pageH - this.GFormsRef.offsetHeight;
                }
              }

              GFormsRef.style.top = this.deltaY-60 + "px";
              GFormsRef.style.left = this.deltaX + "px";
              // 注意使用 this.GFormsRef.style 来设置元素的样式，而不是 this.GForms.style
            },0);
          },

          // 窗体移动方法
          gFormsMousedown(e) {
            if (!this.move) return;

            this.gflag = true;
            this.gfMX = e.offsetX;
            this.gfMY = e.offsetY;
            // 防抖
            if (this.deltaX !== 0 || this.deltaY !== 0) {
              this.setPosition();
            }
            // 移动过程
            document.onmousemove = (e) => {
              if (!this.gflag) return;
              // console.log(e.clientX);
              // console.log(e.clientY);
              // e.clientX表示鼠标当前的水平坐标
              this.deltaX = e.clientX - this.gfMX;
              this.deltaY = e.clientY - this.gfMY;
              this.setPosition();
            }
            // 鼠标松开
          },
          handleMouseUp() {
            this.setPosition();
            this.gflag = false;
            document.onmousemove = null;
            document.onmouseup = null;
          }
      },
}

大致就是这些，其实熟悉了之后组件之间相互转化就很快了，希望对大家有所帮助文章来源地址https://www.toymoban.com/news/detail-468013.html

到了这里，关于vue3到vue2组件重构方法笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！