太原专业做网站方象科技服务案例

1. Props（属性传递）

• 应用场景：
  适用于父组件向子组件传递数据，通常用于单向数据流。
• 流程：
  1. 父组件在子组件标签上通过属性绑定数据（使用 : 或 v-bind）。
  2. 子组件使用 defineProps 宏声明并接收这些属性。
  3. 子组件可以直接使用接收到的 props 数据。
• 代码示例：

<!-- 父组件 -->
<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（事件发射）