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);
     }
   }
   

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

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

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

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

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

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

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