vue3.2+tsx封装组件也挺好玩的！！！

开始

1：创建 tsx文件

2：导入 defineComponent函数

二次封装选择器 tsx写法

实现父子传值

Myselect.tsx 子组件

父组件

实现 emits 传值

Myselect.tsx 子组件

父组件

总结 父组件

<template>
  <div>
    <a-radio-group
      v-model:value="radiova"
      button-style="solid"
      @change="onGroup"
    >
      <a-radio-button value="省外">省外</a-radio-button>
      <a-radio-button value="省内">省内</a-radio-button>
    </a-radio-group>

    <p>{{ cost }}</p>
  </div>
  <Myselet
    :dataList="options"
    :Warehouse="Warehouse"
    @childSelect="onchildSelect"
  ></Myselet>
  <span v-show="freight != null"> 仓库运费：{{ freight }} </span>

  <p v-show="Totalfreight != null || Totalfreight != freight">
    实际运费：{{ Totalfreight }}
  </p>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, watch } from "vue";
import Myselet from "@/components/Mytsx/index";
import currency from "currency.js";

interface SeleType {
  id: string;
  value: string;
  total: number;
}

let Warehouse = ref<string>();
let freight = ref<number>();
const radiova = ref<string>("省外");
const cost = ref<number>(0);
const Totalfreight = ref<number>();

function onchildSelect(value: string, row: any) {
  Warehouse.value = value;
  freight.value = row.total;
  onTotalfreight(freight.value);
}
function onGroup() {
  cost.value = radiova.value === "省外" ? 12.0 : 8.0;
}

function onTotalfreight(total: any) {
  let newlist = currency(cost.value).add(total).value;
  // @ts-ignore
  Totalfreight.value = currency(newlist || 0, { decimal: "." }).format();
}
function onTotalfreightlod(newVal: any) {
  // @ts-ignore
  let newlist = currency(newVal).add(freight.value).value;
  // @ts-ignore
  Totalfreight.value = currency(newlist || 0, { decimal: "." }).format();
}
const options = ref<Array<SeleType>>([
  { value: "北方仓库", id: "112", total: 3.202 },
  { value: "南方仓库", id: "113", total: 23.52 },
  { value: "华北仓库", id: "114", total: 34.11 },
  { value: "华中仓库", id: "115", total: 53.022 },
  { value: "西北仓库", id: "116", total: 37.035 },
  { value: "西藏仓库", id: "117", total: 39.002 },
]);

watch(cost, (newVal, oldVal) => {
  onTotalfreightlod(newVal);
});

onMounted(() => {
  cost.value = radiova.value === "省外" ? 12 : 8;
});
</script>
<style lang='scss' scoped>
</style>

子组件

interface SeleType {
  id: string;
  value: string;
  total: number;
}
export default defineComponent({
  props: {
    Warehouse: {
      type: String as PropType<string>,
      default: null,
    },
    dataList: {
      type: Array as PropType<Array<SeleType>>,
      required: true,
    },
  },

  setup(props, ctx) {
    const { emit } = ctx;
    let val = ref();
    const onSelet = (value: string, total: number) => {
      val.value = value;
      emit("childSelect", val.value, total);
    };
    return () => (
      <>
        <a-select
          value={props.Warehouse}
          placeholder="请选择仓库！"
          style="width: 200px"
          options={props.dataList}
          onChange={onSelet}
        ></a-select>
      </>
    );
  },
});

最后推荐一个计算金额的库 currency.js.org/