vue3 prop

作者：颠沛流离的伤发布日期:2025-10-29 浏览:29

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

<script>
export default {
  props: {
    // 定义一个名为 `message` 的 prop
    message: {
      type: String, // 指定 prop 类型为字符串
      required: true, // 表示这个 prop 是必须的
      default: '默认消息', // 如果没有传递该 prop，则使用默认值
    }
  }
}
</script>

<style scoped>
/* 样式部分可以根据需要添加 */
</style>

解释说明：

props 定义：在 Vue 组件中，props 用于接收父组件传递的数据。上面的代码定义了一个名为 message 的 prop。
type 属性：指定了 message 必须是一个字符串类型。如果传递了其他类型的值，Vue 会发出警告。
required 属性：表示 message 是必需的，如果父组件没有传递该 prop，Vue 会发出警告。
default 属性：如果父组件没有传递 message，则使用默认值 '默认消息'。

这样，父组件可以通过传递 message 来控制子组件中的内容显示。

上一篇：vue 下拉框

下一篇：vue3 this.$refs