Vue.js 的 defineProps 与 props：编写响应式组件的指南

了解 Vue.js 的 defineProps 和 props：响应式组件的数据传递

defineProps：声明组件属性

Vue.js 中的 defineProps 是一个装饰器函数，用于在组件中声明属性。它接收一个对象作为参数，该对象包含属性的名称和类型。例如：

import { defineProps } from 'vue'

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

在这个例子中，我们定义了两个属性：message 和 count。message 是必需的字符串类型，而 count 是一个可选的数字类型，其默认值为 0。

props：传递组件数据

props 是一个特殊的对象，包含组件实例化时传递给它的数据。可以通过 props.propertyName 访问这些数据。例如：

<template>
  <div>
    <p>{{ props.message }}</p>
    <p>{{ props.count }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue'

export default {
  defineProps: {
    message: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

在上面的组件中，我们在模板中使用 props.message 和 props.count。当组件实例化时，它将从父组件接收 message 和 count 属性，并在模板中显示它们。

v-bind：绑定 HTML 属性

v-bind 是一个指令，用于在 HTML 中绑定属性。它接受一个 JavaScript 表达式作为参数。例如：

<template>
  <div>
    <p v-bind:message="props.message"></p>
    <p v-bind:count="props.count"></p>
  </div>
</template>

在这个例子中，我们使用 v-bind:message 和 v-bind:count 绑定 message 和 count 属性。当组件实例化时，它将从父组件接收 message 和 count 属性，并在模板中显示它们。

使用技巧

• 使用 v-bind 绑定属性时，可以在 JavaScript 表达式中使用 props.propertyName 访问属性。
• 可以在组件的 created() 钩子函数中访问 props，但不能在 mounted() 钩子函数中访问它。
• 使用 props.propertyName = newValue 修改属性值。
• 使用 v-model 指令绑定表单元素值。
• 使用 watch() 函数监听属性更改。

结论

defineProps 和 props 是 Vue.js 中至关重要的概念，允许你创建响应式组件并传递数据。通过理解它们的用法，你可以构建更强大、更可重用的组件。

常见问题解答

1. defineProps 和 props 有什么区别？
   defineProps 用于在组件中声明属性，而 props 用于在组件实例化时传递数据。
2. 我可以在组件中使用 props 对象吗？
   是的，你可以在组件中通过 this.props 访问 props 对象。
3. 我可以在组件外部修改 props 对象吗？
   不，props 对象是只读的。
4. 我如何验证传入组件的 props？
   可以使用 defineProps 中的验证器选项来验证 props。
5. 我如何监听 props 更改？
   可以使用 watch() 函数监听 props 更改。