在Vue中，组件之间的参数传递是组件化开发的基础。Vue 2和Vue 3在组件传参方面保持了较高的一致性，但也引入了一些新的特性。以下是Vue 2和Vue 3中组件传参的主要方式：

父组件向子组件传参

• Vue 2和Vue 3：父组件通过v-bind或简写为:，将数据绑定到子组件的属性上。子组件通过props声明接收这些数据。

父组件：

<ChildComponent :parentData="data" />

子组件：

export default {
  props: ['parentData'],
}

子组件向父组件传参

• Vue 2和Vue 3：子组件使用this.$emit触发一个自定义事件，并将数据作为事件的参数传递给父组件。父组件监听这个事件并接收数据。

子组件：

this.$emit('updateData', this.childData);

父组件：

<ChildComponent @updateData="handleUpdate" />

methods: {
  handleUpdate(data) {
    // 处理数据
  }
}

Vue 3的Composition API

Vue 3引入了Composition API，提供了一种新的方式来组织和复用逻辑。虽然这不直接影响组件间的数据传递模式，但它改变了组件内部状态管理和逻辑复用的方式，从而间接影响组件间的交互。

使用Composition API时，可以通过setup函数接收props，并使用context.emit来触发事件，这与Vue 2中使用this.$emit的方式略有不同。

setup(props, { emit }) {
  // 使用props
  // 使用emit来触发事件
}

总结

Vue 2和Vue 3在组件间传参的基本机制上保持了一致，主要通过props和$emit来实现父子组件间的数据传递。Vue 3的Composition API引入了新的组件设计模式，但在组件间传递数据的基本原则并未改变。无论是使用Vue 2还是Vue 3，掌握这些基本的数据传递方式对于构建可维护的Vue应用至关重要。

项目应用

智能制造大数据平台项目中，我们父组件请求接口获取数据然后通过props传值给数字组件进行数字滚动动画的实现。

智慧工地数据大屏项目中的环境监测的历史数据分析的七天和一个月的按钮切换就通过父组件将列表传给props然后子组件触发点击事件切换按钮将值反馈给父组件重新触发接口实现数据刷新的。