在 Vue 3 中，使用 defineProps 定义子组件的 props 非常简单。下面是一个简单的例子：

在 Vue 3 中，`defineProps` 是用于静态地定义组件的属性 (props) 的方法。它接受一个对象作为参数，这个对象的键是 prop 的名称，值可以是类型描述、默认值等信息。这有助于在父组件传递数据给子组件时提供类型安全性和默认值。以下是定义子组件 props 的基本步骤：

// 父组件
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    // 使用 defineProps 来声明 props
    name: {
      type: String, // 数据类型，这里是字符串
      required: true, // 是否必填，默认为 false
      default: 'defaultName', // 默认值
    },
    age: {
      type: Number,
      default: 20,
    },
    isOnline: {
      type: Boolean,
    },
  },
});

在子组件的模板中，你可以直接通过 `{{ name }}`, `{{ age }}`, 或 `{{ isOnline }}` 这样的语法来接收并使用这些 props。

相关问题

Vue3 defineProps定义数据 如何子组件更新数据，defineProps实时监听

在Vue 3中，可以使用`defineProps`来定义子组件的props。`defineProps`会创建一个响应式的props对象，使得父组件传递的props能够在子组件中进行监听和更新。

要实现在子组件中实时监听props的更新，可以使用`watch`或`watchEffect`函数。 `watch`可以监听特定的props或其他响应式数据的变化，并在变化时执行回调函数。而`watchEffect`则可以自动监听所有响应式依赖，并在任何响应式依赖发生变化时执行回调函数。

下面是一个示例代码，演示了如何使用`defineProps`和`watch`来实现子组件实时监听props的更新：

// 子组件
import { defineProps, watch } from 'vue';

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    // 定义props
    defineProps(props);

    // 监听props变化
    watch(() => props.message, (newValue, oldValue) => {
      console.log('Props更新：', newValue, oldValue);
      // 执行相应的操作
    });

    // ...
  },
};

在上面的示例中，通过调用`defineProps(props)`来定义props，使得Vue能够追踪和监听props的变化。然后，使用`watch`函数来监听`props.message`的变化，并在变化时执行回调函数。

请注意，`watch`的第一个参数是一个getter函数，用于获取需要监听的props或其他响应式数据。而第二个参数是一个回调函数，当监听的数据发生变化时会被调用，回调函数的第一个参数是新值，第二个参数是旧值。

希望这个示例能帮助到你！如果有任何其他问题，请随时问我。

defineProps<{...}>()：defineProps 函数用于定义组件的属性(props)，通过传入一个类型定义对象来指定属性的名称和类型。在这个例子中，defineProps 定义了一个包含多个属性的类型定义对象。

`defineProps` 是 Vue.js 中的一个功能，它是一个静态方法，通常在组件的 `setup()` 函数中使用，作用类似于 TypeScript 或者 Flow 的类型注解，帮助开发者明确组件期望接收哪些 props。这个函数接收一个对象作为参数，对象的键是 prop 的名称，值是该 prop 的预期类型。例如：

import { defineComponent, defineProps } from 'vue';

const Props = defineProps<{
  name: String; // 声明 name 属性为字符串类型
  age: Number; // 声明 age 属性为数字类型
  isActive: Boolean; // 声明 isActive 属性为布尔类型
}>

export default defineComponent({
  setup(props) {
    // 在这里可以对 props 进行检查和处理
    console.log('props:', props);
    return {};
  }
});

使用 `defineProps` 可以提升代码的可读性和健壮性，防止在运行时因传入错误类型的值而引发错误。