vue3+ts+ant-design-vue开发心得（长期更新）

<script setup lang="ts">

import { ref } from "vue";

import { publicMethods } from "@/utils/publicMethods";

import { FileItem } from "@/utils/publicType";



const props = defineProps<{

  fileList: FileItem[];

  length: number;

}>();



const { getBase64 } = publicMethods();



const previewVisible = ref<boolean>(false);

const previewImage = ref<string | undefined>("");



const handleCancel = (type: number) => {

  previewVisible.value = false;

};



const handlePreview = async (file: FileItem) => {

  if (!file.url && !file.preview) {

    file.preview = (await getBase64(file.originFileObj)) as string;

  }

  previewImage.value = file.url || file.preview;

  previewVisible.value = true;

};

</script>

vue3.2开始，在script标签中添加setup（<script setup lang="ts">）之后

1. script标签中便可以直接写方法，定义数据对象。

2. 引入组件后也不用再components中注册，模板中直接引用即可。

3. 使用props时，需要用到defineProps来实现

// 不带默认值
const props = defineProps<{
  fileList: FileItem[];
  length: number;
}>();

// 带默认值
const props = withDefaults(
  defineProps<{
    fileList: any;
    length: number;
    type: number;
    width: number;
    height: number;
    cutting: boolean;
    disabled: boolean;
    urlType: number;
  }>(),
  {
    width: 480,
    height: 320,
    cutting: true,
    disabled: false,
    urlType: 1
  }
);

4. provide，inject 用来替代props实现组件间数据传递。 

provide("activitylData", activitylData);在父组件中将数据提供给其子孙组件，不论时子组件还是孙子组件都可通过inject方法直接引用。

const activitylData: any = inject('activitylData'); 用来接收祖先组件传递的数据。

provide，inject本身不提供数据监听，如需监听数据，需将provide提供的数据通过ref或reactive定义。

5. 路由模式定义

history模式定义

import { createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes
});

hash模式定义

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({

  history: createWebHashHistory(),

  routes

});