Vue3 中的 defineProps

Vue3 中的 defineProps

在 Vue3 中，我们可以通过 defineProps 函数来定义一个组件的 props，并且这些 props 是只读的，即不能在组件内部更改其值。这样可以保证 props 数据的稳定性，避免意外的数据变化导致组件状态的不可预测性。

什么是 props

在 Vue 中，组件之间通过 props 来传递数据。props 可以是父组件传递给子组件的数据，用来自定义子组件的行为或样式。在 Vue2 中，我们可以通过在组件中声明 props 来定义组件接收的数据格式和默认值，然后可以在组件内部通过 this.props 来访问这些数据。

// ParentComponent.vue
<template>
  <ChildComponent :message="hello" />
</template>

<script>
export default {
  data() {
    return {
      hello: 'Hello, World!'
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello, Vue!'
    }
  }
}
</script>

Vue3 中的 defineProps

在 Vue3 中，我们引入了 defineProps 函数来替代 Vue2 中的 props 声明。通过 defineProps 来定义一个组件的 props，可以更清晰地表明这些 props 是只读的。

// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  setup() {
    const props = defineProps();
    return {
      message: props.message
    }
  }
}
</script>

如上所示，我们在 setup 函数中调用 defineProps，它会返回一个包含组件 props 的只读对象。我们可以直接在 setup 函数中通过解构赋值的方式来获取 props 的值，并将其返回给模板中使用。

只读的好处

将 props 设为只读的好处在于可以避免在组件内部意外修改 props 数据，从而导致数据不稳定的情况发生。通过 defineProps 来定义只读的 props，能够提高代码的可维护性和可读性。

示例

下面我们来看一个完整的示例，演示如何在 Vue3 中使用 defineProps 来定义只读的 props。

// ParentComponent.vue
<template>
  <ChildComponent :message="hello" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello, World!'
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

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

export default {
  setup() {
    const props = defineProps();
    return {
      message: props.message
    }
  }
}
</script>

在这个示例中，ParentComponent 组件向 ChildComponent 传递了一个 message props，而 ChildComponent 组件通过 defineProps 来定义一个只读的 props，并在模板中使用这个 props 的值。

结论

通过 defineProps 函数可以更清晰地定义只读的 props，在 Vue3 中推荐使用这种方式来定义组件的 props。只读的 props 能够确保组件内部数据的稳定性，避免意外的数据变化导致组件状态的不可预测性。在开发 Vue 组件时，尽量保持 props 的只读性可以提高代码的可维护性和可读性。