一、Props的定义
在Vue 3的组合式API中，我们使用defineProps宏来声明组件的props。这个宏只能在<script setup>标签内使用，它接收一个对象或一个类型注解，用于定义组件期望接收的props。
<script setup>
import { defineProps } from 'vue';const props = defineProps({title: String,count: {type: Number,default: 0},// ...其他props
});
</script>
在这里，我们定义了两个props：title和count。title是字符串类型，而count是数字类型，且默认值为0。
二、Props的使用
- 传递Props：
在父组件中，我们使用v-bind或简写:来将父组件的数据绑定到子组件的props上。
<template><ChildComponent :title="parentTitle" :count="parentCount" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentTitle = ref('Hello from Parent');
const parentCount = ref(10);
</script>
- 访问Props：
在子组件的<script setup>中，声明的props会自动暴露为组件的局部变量，我们可以直接通过变量名来访问它们。
<template><div><p>{{ title }}</p><p>{{ count }}</p></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({title: String,count: Number
});// 直接使用props
</script>
三、Props的特性
- 单向数据流：
Props是单向的，从父组件流向子组件。子组件不应直接修改props的值，而应该通过事件或其他机制与父组件通信。
- 响应式：
当父组件的数据变化时，传递给子组件的props会自动更新，Vue 3内部使用了Proxy来确保这一点的实现。
- 类型验证：
我们可以为props指定类型，Vue 3会在运行时进行类型检查，如果类型不匹配，会在控制台中发出警告。
四、Props的注意事项
- 避免直接修改Props：
子组件应该避免直接修改props的值。如果需要修改数据，应该通过emit事件来通知父组件，由父组件来更新数据并重新传递给子组件。
- 命名规范：
在HTML模板中，props的名称应该使用kebab-case（短横线分隔命名），而在JavaScript中则使用camelCase（驼峰命名法）。
- 使用
v-bind或简写:：
在传递动态数据或表达式时，必须使用v-bind或简写:来绑定数据。
五、Props的高级用法
- 结合计算属性使用：
我们可以基于props的值来创建计算属性，以实现更复杂的数据处理逻辑。
<script setup>
import { defineProps, computed } from 'vue';const props = defineProps({initialCount: Number
});const doubleCount = computed(() => props.initialCount * 2);
</script>
- 监听Props的变化：
我们可以使用watch或watchEffect来监听props的变化，并在变化时执行某些操作。
<script setup>
import { defineProps, watch } from 'vue';const props = defineProps({count: Number
});watch(() => props.count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>
- 与
ref和reactive结合使用：
在需要时，我们可以将props的值与ref或reactive结合使用，以创建更复杂的响应式状态。但需要注意的是，直接对props使用ref或reactive并不会使它们变得可修改，而是创建了一个新的响应式引用。
六、总结
Vue 3的组合式API为props的使用带来了更多的灵活性和便利性。通过合理使用props，我们可以实现组件之间的数据传递和状态同步，从而提高应用程序的可维护性和可扩展性。在实际开发中，我们应该遵守props的单向数据流原则，避免直接修改props的值；同时，也应该充分利用props的类型验证、默认值等特性来提高代码的健壮性和可读性。希望本文能够帮助你更好地理解和使用Vue 3组合式API中的props。
