关于Vue3中defineProps用法图文详解

1. 什么是 defineProps？
   defineProps 是 Vue3 中一种新的组件数据传递方式，可以用于在子组件中定义接收哪些父组件的 props。当父组件的 props 发生变化时，子组件也会随之响应。

2. 如何使用 defineProps？
   在子组件中可以使用 defineProps 声明该组件需要接收的 props，它需要传递一个包含 props 字段的对象，每个字段表示该 props 的默认值和类型等信息，示例如下：

import { defineComponent, defineProps } from 'vue'

const ChildComponent = defineComponent({
  props: defineProps({
    message: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    }
  }),
  template: `
    <div>
      <p>Message: {{ message }}</p>
      <p>Count: {{ count }}</p>
    </div>
  `
})

在父组件中，只需要通过 props 的方式向子组件传递对应的属性即可，如下所示：

<template>
  <div>
    <ChildComponent message="Hello, Vue3!" :count="10" />
  </div>
</template>

1. defineProps 使用示例

示例一：列表组件

下面是一个简单的列表组件，在组件内使用 defineProps 声明需要接收的 items 属性，从父组件传入一个数组，组件会渲染出该数组中所有的元素。

import { defineComponent, defineProps } from 'vue'

const ListComponent = defineComponent({
  props: defineProps({
    items: {
      type: Array,
      default: () => []
    }
  }),
  template: `
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  `
})

父组件中可以这样使用：

<template>
  <div>
    <ListComponent :items="['Apple', 'Banana', 'Orange']" />
  </div>
</template>

示例二：计数器组件

下面是一个简单的计数器组件，在组件内使用 defineProps 声明需要接收的 initialValue 和 step 属性，从父组件传入一个初始值和步长值后，组件会根据步长不断增加该初始值。

import { defineComponent, defineProps, ref } from 'vue'

const CounterComponent = defineComponent({
  props: defineProps({
    initialValue: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    }
  }),
  setup(props) {
    const count = ref(props.initialValue)

    const increment = () => {
      count.value += props.step
    }

    return {
      count,
      increment
    }
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">+</button>
    </div>
  `
})

父组件中可以这样使用：

<template>
  <div>
    <CounterComponent :initialValue="10" :step="2" />
  </div>
</template>

以上就是关于 defineProps 的详细讲解和示例，希望能对您的学习有所帮助。