Vue3.5父传子props用法

带响应式Props解构赋值

以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了 testCount能直接渲染显示，但会失去响应式，当我们修改testCount时页面不更新。

<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 0,
    },
  });

  const { testCount } = props;
</script>

老写法，使用toRefs或者toRef解构

<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps, toRef, toRefs } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 0,
    },
  });

  const { testCount } = toRefs(props);
  // 或者
  const testCount = toRef(props, 'testCount');
</script>

最新Vue3.5写法，依然保持响应式

<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const { testCount } = defineProps({
    testCount: {
      type: Number,
    },
  });

</script>

Props默认值新写法

旧写法

<template>
  <div>
    {{ props.testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const props = defineProps({
    testCount: {
      type: Number,
      default: 1
    },
  });
</script>

新写法

<template>
  <div>
    {{ testCount }}
  </div>
</template>

<script setup>
  import { defineProps } from 'vue';
  const { testCount=18 } = defineProps({
    testCount: {
      type: Number,
    },
  });
</script>