1. Props(属性传递)
- 应用场景:
适用于父组件向子组件传递数据,通常用于单向数据流。 - 流程:
- 父组件在子组件标签上通过属性绑定数据(使用 : 或 v-bind)。
- 子组件使用 defineProps 宏声明并接收这些属性。
- 子组件可以直接使用接收到的 props 数据。
- 代码示例:
javascript"><!-- 父组件 -->
<template><ChildComponent :message="parentMessage" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const parentMessage = ref('Hello from parent');
</script><!-- 子组件 -->
<template><p>{{ message }}</p>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({message: String
});
</script>
2. Emits(事件发射)