Vue 组件通过 props 接收外部输入，通过自身响应式状态保存局部数据，并通过组件事件表达希望父组件执行的变化。组件之间通常遵循单向数据流：父组件把数据向下传给子组件，子组件不直接改写父组件拥有的状态。
Props 向下传递
Vue 的 props 是父子组件之间的单向绑定。父组件更新时，新的 prop 值会传给子组件；子组件中的 prop 是只读的，直接赋值会触发警告。
<!-- Parent.vue -->
<CounterButton
:count="count"
@increment="count++"
/>
<!-- CounterButton.vue -->
<script setup>
const props = defineProps({ count: Number })
const emit = defineEmits(['increment'])
</script>
<template>
<button @click="emit('increment')">
{{ props.count }}
</button>
</template>
这里的 count 由父组件拥有并向下传递。子组件点击后发出 increment 事件，父组件监听事件并更新自己的状态。事件向上传达变化意图，不会改变 props 的单向数据约束。
组件事件
子组件可以使用 $emit 或 defineEmits() 发出自定义事件，父组件通过 v-on 或 @ 监听。组件事件不会像原生 DOM 事件一样沿组件树冒泡，只能由直接父组件监听。跨越多个层级的数据共享通常使用 provide/inject 或状态管理方案。
组件 v-model
组件上的 v-model 是一组 prop 与事件约定。默认情况下，父组件通过 modelValue 向下传值，子组件通过 update:modelValue 请求父组件更新；defineModel() 为这一约定提供了简化写法。它看起来像双向绑定，但状态所有权与更新通道仍然是明确的。
引用类型 Props
当 prop 是对象或数组时，子组件能够修改其内部属性，因为 JavaScript 按引用共享对象。除非父子组件有明确的紧密协作约定，否则应由子组件发出事件，让父组件完成修改，避免数据变化来源难以追踪。
相关官方资料：Props、组件事件、组件 v-model、依赖注入。