vue2 和vue3组件传参

在 Vue.js 中，无论是 Vue 2 还是 Vue 3，组件之间的通信都是通过父组件向子组件传递参数（props）来实现的。不过，Vue 2 和 Vue 3 在某些细节上有所不同。下面分别介绍 Vue 2 和 Vue 3 中如何传递参数。

Vue 2 传参

在 Vue 2 中，父组件通过在子组件标签上添加属性来传递参数，而子组件通过 props 选项来声明接受哪些参数。

示例代码

假设有一个名为 ChildComponent 的子组件，我们想从父组件传递一个名为 message 的参数给它。

1. 定义子组件：

Vue
深色版本
<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

2. 使用子组件：

在父组件中使用子组件，并传递参数：

Vue
深色版本
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

Vue 3 传参

Vue 3 引入了一些新的特性，如 Composition API，但它仍然支持传统的 Options API。在 Vue 3 中，传参的方式与 Vue 2 类似，但在 Composition API 中有一些不同之处。

示例代码

1. 使用 Options API：

Vue
深色版本
<!-- ChildComponent.vue -->
<template>
  <div>{{ props.message }}</div>
</template>

<script setup>
defineProps({
  message: {
    type: String,
    required: true
  }
});
</script>

在父组件中使用子组件，并传递参数：

Vue
深色版本
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const parentMessage = 'Hello from parent!';
</script>

2. 使用 Composition API：

在 Vue 3 的 Composition API 中，你也可以使用 setup 函数来接收 props：

Vue
深色版本
<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script setup>
const props = defineProps({
  message: {
    type: String,
    required: true
  }
});
</script>

在父组件中使用子组件，并传递参数：

Vue
深色版本
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const parentMessage = 'Hello from parent!';
</script>

传参注意事项

无论是在 Vue 2 还是 Vue 3 中，都需要注意以下几点：

1. 类型验证：

   • 可以为 props 设置类型验证，确保传递的参数符合预期的类型。

2. 默认值和必需属性：

   • 可以为 props 设置默认值。
   • 可以设置 required: true 来确保必须传递该参数。

3. 不要修改 props：

   • 在子组件中不应直接修改从父组件传递过来的 props。如果需要改变，可以使用计算属性或响应式引用。

4. 传递复杂对象：

   • 当传递复杂对象（如数组或对象）时，需要注意深拷贝或引用的问题。

总结

Vue 2 和 Vue 3 在传参方面的基本原理相同，主要区别在于 Vue 3 引入了 Composition API，并且在 props 的定义上有一些语法上的差异。无论是使用 Options API 还是 Composition API，都可以实现组件间的参数传递。