vue3 defineProps如何使用

使用`defineProps`来定义props非常简单，只需要在组件中调用`defineProps`函数，将props名称和props的类型以及默认值传递给它即可。下面是一个使用`defineProps`的示例：

import { defineComponent, defineProps } from 'vue'

const MyComponent = defineComponent({
  props: {
    msg: {
      type: String,
      default: 'Hello World!'
    }
  },
  setup(props) {
    return {
      myMsg: props.msg
    }
  }
})

// 使用defineProps定义props
const MyComponentWithProps = defineComponent({
  setup() {
    // 定义props
    const props = defineProps({
      msg: {
        type: String,
        default: 'Hello World!'
      }
    })

    return {
      myMsg: props.msg
    }
  }
})

在上面的示例中，我们分别定义了一个普通的Vue组件和一个使用`defineProps`定义props的Vue组件。可以看到，在使用`defineProps`的组件中，我们将props定义放在了`setup`函数中，使用`defineProps`函数来定义props，并返回一个包含props的响应式对象。与普通的Vue组件相比，使用`defineProps`的组件更加灵活，可以方便地进行类型检查和设置默认值等操作。