Vue3中props的原理与使用

在Vue3中，props仍然是用来接收父组件传递给子组件的数据的。然而，在Vue3中，props的使用有一些变化。

1. 定义props：在Vue3中，定义props需要使用defineProps函数，该函数接收一个对象作为参数，对象的属性即为props的定义。每个属性都可以指定类型、默认值、是否必需等。

import { defineProps } from 'vue';
export default {
  props: {
    msg: String
  },
  setup(props) {
    console.log(props.msg);
  }
}

1. 接收props：在Vue3中，接收props需要使用setup函数。在setup函数的参数中，可以通过解构赋值的方式获取props。

import { defineProps } from 'vue';
export default {
  props: {
    msg: String
  },
  setup(props) {
    console.log(props.msg);
  }
}

1. 使用props：在Vue3中，可以直接在模板中使用props，无需使用this关键字。

<template>
  <div>
    {{ msg }}
  </div>
</template>

总结起来，Vue3中props的原理与使用步骤如下：

1. 使用defineProps定义props；
2. 在setup函数的参数中解构赋值获取props；
3. 在模板中直接使用props。

需要注意的是，Vue3中的props是只读的，不能在子组件中修改props的值。如果需要修改props的值，可以使用setup函数返回一个对象，并在返回的对象中定义一个新的变量。