vue3 defineProps和withDefaults 默认值使用

• 前端

vue3 defineProps和withDefaults

1、defineProps，写js用

父组件：

  



import { defineComponent, reactive, ref } from "vue";
import Layout from "@/components/layout.vue";
import menu from "./menu";

defineComponent({
  name: "HomeView",
});

const menuList = ref(menu);

子组件：

import { defineComponent, defineProps } from "vue";

const props = defineProps({
  menuList: String|undefined
})

console.log('props');
console.log({...props});

结果：

在这里插入图片描述

2、withDefaults，写ts用

子组件：

import { defineComponent, defineProps } from "vue";

defineComponent({
  name: "LayoutBox",
});

const props = withDefaults(
  defineProps<{
    menuList: any // 类型校验
  }>(),
  {
    menuList: [] // 这是默认值
  }
);

console.log('props');
console.log({...props});

结果：

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/fbcbffd0c4.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐