defineComponent defineProps

在 Vue3 中，使用 `<script setup>` 可以使用 `defineComponent` 和 `defineProps` 函数来定义组件。

`defineComponent` 函数用于创建组件，接收一个对象作为参数，该对象包含了组件的属性，如 `props`、`data`、`methods` 等。

示例代码如下：

<script setup>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    title: String,
    content: String
  },
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  }
})
</script>

在上面的示例代码中，我们使用 `defineComponent` 函数创建了一个组件，该组件包含了 `props`、`data` 和 `methods` 三个属性，并且我们在 `props` 中定义了 `title` 和 `content` 两个属性。

`defineProps` 函数用于在组件内定义 props，接收一个对象作为参数，该对象包含了 props 的类型和默认值等信息。

示例代码如下：

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  title: String,
  content: {
    type: String,
    default: ''
  }
})

export default defineComponent({
  props,
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  }
})
</script>

在上面的示例代码中，我们使用 `defineProps` 函数定义了组件的 props，其中 `title` 的类型为 `String`，而 `content` 的类型为 `String`，并且我们为 `content` 设置了默认值为 `''`。然后将定义好的 `props` 对象传递给 `defineComponent` 函数即可。