• 基于SqlSugar的开发框架循序渐进介绍（11）-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

    随着Vue3和TypeScript的大浪潮不断袭来，越来越多的Vue项目采用了TypeScript的语法来编写代码，而Vue3的JS中的Setup语法糖也越来越广泛的使用，给我们这些以前用弱类型的JS语法编写Vue代码的人不少冲击，不过随着大量的学习和代码编写，经历过一段难熬的时间后，逐步适应了这种和之前差别不小的写法和冲击。本篇随笔介绍总结了Vue3中一些常见的基于TypeScript的Setup语法与组合式 API的处理代码案例。

    TypeScript（简称ts）是微软推出的静态类型的语言，相比于js，TypeScript拥有强类型、编译器严谨的语法检查、更加严苛的语法，TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。TypeScript 是 JavaScript 的强类型版本，最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

    基于TypeScript的Setup语法糖写法越来越多，熟练使用的话，需要一个学习过程，另外ElementPlus控件也有了一些不同的变化，而且它的官方案例代码基本上采用了Setup语法糖的写法来提供例子代码。

    复制代码
    复制代码

     我们也可以将 prop 的类型移入一个单独的接口中：

    复制代码
    复制代码
    复制代码
    复制代码

    有时候，我们还需要给指定的prop属性给定默认值，那么也可以通过函数withDefaults一起进行处理即可。

    如下面是我们指定模块定义的prop接口信息和defineProps的处理代码。

    复制代码
    复制代码
    复制代码
    复制代码

     

    7、Watch函数的使用

    有时候，子组件需要监控自身某个值的变化，然后进行相关的处理，那么对值进行监控就需要用到了watch函数。

    复制代码
    复制代码
    // 监听外部对props属性变更,如通过ResetFields()方法重置值的时候
watch(
  () => props.modelValue,
  newValue => {
    console.log(newValue);
    emit("update:modelValue", newValue + "");
  }
);

watch(
  () => props.options,
  newValue => {
    newValue.forEach(item => {
      dictItems.value.push(item);
    });
  }
);
    复制代码
    复制代码

     

    8、onMounted函数的使用

    我们一般在 onMounted 的逻辑里面准备好组件或者页面显示的内容，这里面在页面组件准备妥当后进行更新显示。

    //页面初始化加载
onMounted(() => {
  getlist();
});

    或者组件里面

    复制代码
    复制代码
    //挂载的时候初始化数据
onMounted(async () => {
  var typeName = props.typeName;
  var options = props.options;
  if (typeName && typeName !== "") {
    // 使用字典类型，从服务器请求数据
    await dictdata.GetTreeItemByDictType(typeName).then(list => {
      if (list) {
        list.forEach(item => {
          dictItems.value.push({ id: item.id, label: item.label });
        });
      }
    });
  } else if (options && options.length > 0) {
    // 使用固定字典列表
    options.map(item => {
      dictItems.value.push({ id: item.id, label: item.label });
    });
  }

  // 设置默认值
  keyword.value = props.modelValue;
});
    复制代码
    复制代码

    9、自定义组件的ModelValue

    一般组件在绑定值的时候，一般使用v-Model的属性来设置它的值。

      
    v-model="editForm.name" />

    或者日期组件

      
    v-model="editForm.birthDate" align="right" type="date" placeholder="选择日期"
      format="YYYY-MM-DD" />

    因此我们自定义开发的组件，也应该采用这样约定的属性。这里面的v-Model对应的prop属性就是modelValue的，因此我们需要定义这个属性，并处理Emits事件就可以了。

    复制代码
    复制代码
    //声明Props的接口类型
interface Props {
  modelvalue?: string | number; // 接受外部v-model传入的值
}
//使用默认值定义Props
const props = withDefaults(defineProps(), {
  modelValue: "" //对应自定义控件的v-model的值
});
    复制代码
    复制代码

    然后声明组件的事件，在组件内部合适的地方触发即可。

    复制代码
    复制代码
    //声明组件事件
interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
}
//定义组件事件
const emit = defineEmits();
    复制代码
    复制代码

    并在Watch监控它的变化，触发组件的自定义事件

    复制代码
    复制代码
    watch(
  () => props.modelValue,
  newValue => {
    console.log(newValue);
    emit("update:modelValue", newValue + "");
  }
);
    复制代码
    复制代码

     

    10、自定义引入Vue的API和组件

    上面所有的setup语法糖代码里面，我们在开始的时候，往往都需要引入ref，reactive等API，如下代码所示。