vue3+vite+ts--withDefaults+defineProps的使用(父传子)

目录

一、作用

二、示例

三、defineProps的用法

---

一、作用

- defineProps父组件绑定的属性值接收

- withDefaults是defineProps绑定默认值的api

二、示例

父组件

<template>
  <div class="">
    <h1>我是父组件</h1>
    <son info="我是父组件传的数据" :arr="arr"></son>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import son from './son.vue';
const arr = reactive<Array<string>>(['s', 's']);
</script>

<style lang="scss" scoped></style>

子组件

<template>
  <div class="">
    <h1>我是子组件</h1>
    <div>{{ props.info }}</div>
    <div>{{ props.arr }}</div>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults, defineProps } from 'vue';
const props = withDefaults(
  defineProps<{
    info: string;
    arr: Array<string>;
  }>(),
  //设置默认值
  {
    info: '这里设置默认值',
    arr: () => ['one', 'two']
  }
);
</script>

<style lang="scss" scoped></style>

三、defineProps的用法

1.defineProps不使用泛型

defineProps({
  info: {
    type: String,
    default: '默认数据'
  },
  arr: Array<string>
});

2.defineProps使用泛型

  defineProps<{
    info: string;
    arr: Array<string>;
  }>(),

3.withDefaults的使用

const props = withDefaults(
  defineProps<{
    info: string;
    arr: Array<string>;
  }>(),
  //设置默认值
  {
    info: '这里设置默认值',
    arr: () => ['one', 'two']
  }
);