vue3中defineProps及使用方法详解

<script setup>
import { defineProps } from 'vue';
// 定义props
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: 'Default Title'
  },
  count: {
    type: Number,
    default: 0
  }
});
</script>
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

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

import { defineProps } from 'vue'
    const props = defineProps({
      type:{
        type: String,
        validator: (value) => {
          return ['success', 'warning', 'danger', 'info'].includes(value)
        }
      },
      data:{
        type: [Array, Object],
        default: () => {
          return { name: 'jack', age: 20 }
        }
      }
    })

import { defineProps } from 'vue'
    const props = defineProps({
      count: {
        type: Number,
        required: true,
        default: 0,
        validator: (value) => {
          return value >= 0 && value <= 10
        }
      }
    })

import { createApp } from 'vue'
    import App from './App.vue'
    
    const app = createApp(App)

    app.config.globalProperties.$options = {
    // 将组件的 props 的 kebab-case 转换为 camelCase
    // 例如 `some-prop` 将被转换为 `someProp`.
      convertProps: true
    }
    
    app.mount('#app')