defineProps 怎么用

`defineProps`是Vue.js中的一个功能，用于创建和定义组件的props（属性）。它是`setup()`生命周期钩子中的一部分，通常在自定义组件的逻辑开始之前使用。`defineProps`的作用是明确地声明组件接受哪些父组件传入的数据，并提供类型验证。

以下是一个简单的`defineProps`的例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

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

// 使用defineProps定义props
const props = defineProps({
  // 定义两个prop，title和description都有默认值
  title: {
    type: String,
    default: '默认标题'
  },
  description: {
    type: String,
    default: '这是描述'
  }
});

// 在模板中使用这些prop
</script>

在这个例子中，`title`和`description`都是props，它们的类型分别为字符串，如果父组件没有传入这两个值，组件将使用提供的默认值。

如果你想要在组件内部处理prop的变化，可以使用`watchEffect`或`onMounted`等生命周期钩子监听它们：

setup() {
  const { title, description } = toRefs(props); // 如果不希望每次渲染都重新解包props

  watchEffect(() => {
    console.log('当title或description改变时，这里会被触发');
  });

  onMounted(() => {
    // 可能会在这里做些初始化操作，比如根据传入的prop动态设置样式或其他状态
  });
}