vue3中props使用方法

vue3中props使用方法

在 Vue 3 中，props 是组件之间传递数据的主要方式之一。props 允许父组件向子组件传递数据，子组件通过定义 props 来接收这些数据。以下是 Vue 3 中 props 的详细使用方法。

1. props 的基本用法

(1) 定义 props

在子组件中，可以通过 defineProps 或 props 选项来定义 props。

使用 defineProps（推荐）

<script setup>
// 使用 defineProps 定义 props
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0,
  },
});
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

使用 props 选项

export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    // 使用 props
    console.log(props.title);
    console.log(props.count);
  },
};

(2) 传递 props

在父组件中，通过属性绑定的方式将数据传递给子组件。

<template>
  <ChildComponent title="Hello, Vue 3!" :count="10" />
</template>

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

2. props 的类型验证

Vue 3 支持对 props 进行类型验证，确保传递的数据符合预期。

(1) 基本类型验证

defineProps({
  title: String,
  count: Number,
  isActive: Boolean,
  items: Array,
  user: Object,
});

(2) 自定义验证函数

可以通过 validator 函数自定义验证逻辑。

defineProps({
  count: {
    type: Number,
    validator: (value) => {
      return value >= 0 && value <= 100;
    },
  },
});

3. props 的默认值

可以为 props 设置默认值，当父组件未传递该 prop 时，使用默认值。

defineProps({
  title: {
    type: String,
    default: 'Default Title',
  },
  count: {
    type: Number,
    default: 0,
  },
});

4. props 的只读性

在子组件中，props 是只读的，不能直接修改。如果需要修改 props 的值，可以将其赋值给一个局部变量或使用计算属性。

<script setup>
import { computed } from 'vue';

const props = defineProps({
  count: Number,
});

// 使用计算属性
const doubledCount = computed(() => props.count * 2);
</script>

<template>
  <p>Doubled Count: {{ doubledCount }}</p>
</template>

5. props 的高级用法

(1) 传递所有 props

可以使用 v-bind 将父组件的所有 props 传递给子组件。

<template>
  <ChildComponent v-bind="$props" />
</template>

(2) 动态 props

可以通过动态绑定的方式传递 props。

<template>
  <ChildComponent :title="dynamicTitle" :count="dynamicCount" />
</template>

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

const dynamicTitle = ref('Dynamic Title');
const dynamicCount = ref(5);
</script>

(3) props 的类型推断（TypeScript）

如果使用 TypeScript，可以通过泛型为 defineProps 提供类型推断。

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
}

const props = defineProps<Props>();
</script>

6. 注意事项

命名规范：props 的命名应使用驼峰式（如 userName），在模板中使用时需转换为短横线分隔（如 user-name）。

单向数据流：props 是单向数据流，子组件不能直接修改父组件传递的数据。

性能优化：避免传递过多的 props，尤其是复杂对象或数组，可能导致性能问题。

总结

props 是 Vue 3 中组件通信的核心机制之一，通过定义和传递 props，可以实现父子组件之间的数据传递。合理使用 props 的类型验证、默认值和动态绑定，可以提升代码的可维护性和健壮性。结合 TypeScript，可以进一步增强 props 的类型安全性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github