Vue3 Props传递全攻略：通俗易懂，带你搞懂属性传递

前端

2022-11-07 23:13:08

Vue 3 Props：通俗易懂的指南

深入了解组件之间的数据传递

Vue.js 3 中，Props 是组件之间传递数据的重要桥梁。相较于 Vue 2，Vue 3 对 Props 的传递方式进行了革新，如果你使用 TypeScript，其写法可能略显陌生。

什么是 Props？

Props 是一个神奇的机制，可以让父组件向子组件传递数据。就像管道一样，Props 允许信息从一个组件流向另一个组件。

声明 Props

在父组件中，你可以通过两种方式声明 Props：

在组件选项中声明：

export default {
  props: {
    message: String,
    count: Number,
  }
};

在模板中声明：

<template>
  <child-component :message="message" :count="count" />
</template>

<script>
export default {
  props: ['message', 'count'],
};
</script>

使用 Props

在子组件中，你可以通过两种方式使用 Props：

在组件选项中声明：

export default {
  props: {
    message: String,
    count: Number,
  },
};

在模板中使用：

<template>
  <p>{{ message }}</p>
  <p>{{ count }}</p>
</template>

<script>
export default {
};
</script>

类型检查

借助 TypeScript 的强大功能，你可以对 Props 进行类型检查。有两种方式可以做到：

在组件选项中声明类型：

export default {
  props: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    },
  },
};

在模板中使用类型注解：

<template>
  <child-component :message="message" :count="count" />
</template>

<script>
export default {
  props: {
    message: String,
    count: Number,
  },
};
</script>