Vue自定义组件：无数据展示组件（NoData）

---

在前端开发中，当页面请求数据为空时，往往需要展示一个友好的提示信息，告知用户当前无数据可展示。为了提高开发效率和代码复用性，我们可以创建一个自定义的Vue组件，用于展示无数据时的提示信息。本文将介绍如何创建一个名为NoData的Vue组件，并提供相应的源代码示例。

首先，我们需要在Vue项目中创建一个新的Vue组件文件，命名为NoData.vue。该文件可以放置在项目的组件目录下，比如src/components/文件夹中。

NoData.vue组件的基本结构如下所示：

<template>
  <div class="no-data-container">
    <p class="no-data-message">{
  { message }}</p>
  </div>
</template>

<script>
export default {
  name: 'NoData',
  props: {
    message: {
      type: String,
      default: '暂无数据',
    },
  },
};
</script>

<style scoped>
.no-data-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.no-data-message {
  font-size: 16px;
  color: #999;
}
</style>

以上代码定义了一个名为NoData的Vue组件，它接受一个名为message的属性࿰