前端歌谣-第壹佰零七课-记录初步写vue3的一些问题和解决思路

前言

大家好 我是歌谣 今天给大家说说我刚写vue3项目的一些问题

问题1语法糖写法不会写 用传统写法

export default defineComponent({
  setup() {
    const router = useRouter();
    const layout = {};
    const validateMessages = {
      required: "请输入当前数量",
    };
    const formState = reactive({
      user: {
        planned: 0,
        qualified: 0,
        unqualified: 0,
        scrap: 0,
      },
    });
    const onFinish = (values: any) => {
      console.log("Success:", values);
    };
    const goHome = () => {
      router.push({
        name: "index",
      });
    };
    const getError = () => {
      message.error("有异常出现");
    };
    const teamcode = ref<string>("");
    return {
      teamcode,
      formState,
      onFinish,
      layout,
      validateMessages,
      goHome,
      getError,
    };
  },

解决:语法糖写法

 <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { message } from "ant-design-vue";
  import { ClockCircleOutlined } from '@ant-design/icons-vue';
  const router = useRouter();
  const layout = {};
  const validateMessages = {
    required: "请输入当前数量",
  };
  const formState = reactive({
    user: {
      planned: 0,
      qualified: 0,
      unqualified: 0,
      scrap: 0,
    },
  });
  const onFinish = (values: any) => {
    console.log("Success:", values);
    router.push({
      name: "FinishedProduct",
    });
  };
  const goHome = () => {
    router.push({
      name: "index",
    });
  };
  const getError = () => {
    message.error("有异常出现");
  };
  const teamcode = ref<string>("");
  </script>

ref和reactive分不清用法 目前也是简单使用

 import { ref, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { message } from "ant-design-vue";
  import { ClockCircleOutlined } from '@ant-design/icons-vue';
  const router = useRouter();
  const layout = {};
  const validateMessages = {
    required: "请输入当前数量",
  };
  const teamcode = ref<string>("");
  const formState = reactive({
    user: {
      planned: 0,
      qualified: 0,
      unqualified: 0,
      scrap: 0,
    },
  });

ant design vue只能横向排布

    <a-timeline >
      <a-timeline-item>
        备料</a-timeline-item>
      <a-timeline-item>
        
        钻中孔</a-timeline-item>
      <a-timeline-item>
        精加工
      </a-timeline-item>
      <a-timeline-item>
        <template #dot><clock-circle-outlined style="font-size: 16px" /></template>
        钻边孔</a-timeline-item>
      <a-timeline-item>法兰成品检</a-timeline-item>
    </a-timeline>

解决：纵向排布

  <a-steps :current="numberNew">
    <a-step v-for="(item, index) in baseArray" :key="item.id" :title="item.id==numberNew?item.name:''">
    </a-step>
  </a-steps>

vue父传子props

const props = defineProps({
  //默认传入的数据线
  baseArray: {
    type: Array,
    default: () => {
      return []
    },
  },
  //默认传入的索引
  number: {
    type: Number,
    default: 0
  }
});

vue3子传父emit

const emit = defineEmits(["handleShowNumber"])
const router = useRouter();
const layout = {};
const validateMessages = {
  required: "请输入当前数量",
};
const formState = reactive({
  user: {
    planned: 0,
    qualified: 0,
    unqualified: 0,
    scrap: 0,
  },
});
const onFinish = (values) => {
  emit("handleShowNumber")
  numberNew.value++
  console.log(numberNew,"")
  if (numberNew.value > baseArray.length-1) {
    router.push({
      name: "index"
    });
  } else {
    router.push({
      name: baseArray[0].route
    });
  }
};

vue方法v-on少写

 <BaseForm :baseArray="BaseArray" :number="number" @handleShowNumber="handleChangeNumber"></BaseForm>

vue父组件的传值script中无法直接使用props

const { baseArray, number } = props

总结 今天学习vue大概也就遇到这些问题吧 成长巨大 明天也将面临新一轮的挑战吧 加油吧 小伙子