写一个idea vue 组件模板，一创建 name的属性属性就是创建组件的名字

当你使用Vue.js创建一个新的组件时，通常会包含一些基本结构，例如HTML部分、CSS样式以及JavaScript逻辑。这里是一个简单的Vue组件模板示例，它有一个`name`属性用于表示组件名称：

<template>
  <div>
    <h1>{{ componentName }}</h1>
    <!-- 这里是你组件的主要内容 -->
  </div>
</template>

<script>
export default {
  props: { // 定义props，其中name属性接收并展示在标题上
    name: {
      type: String,
      required: true, // 确保name属性必填
      default: '默认组件名', // 如果未提供，默认值为"默认组件名"
    },
  },
  computed: {
    componentName() {
      return this.name; // 计算属性返回prop的值
    },
  },
};
</script>

<style scoped>
/* 可选的CSS样式 */
</style>

在这个例子中，`<template>`部分负责视图渲染，`<script>`部分包含了数据和方法，而`<style scoped>`则可以添加组件特定的CSS样式。`props`标签用于声明组件接受外部传递的数据（在这个案例中是`name`），然后在`computed`选项中，我们创建了一个计算属性`componentName`，将接收到的`name`属性显示在`<h1>`标签中。