vue自定义组件

<template>
  <div class="custom-component">
    <!-- 自定义组件的内容 -->
    <h1>{{ title }}</h1>
    <slot></slot> <!-- 插槽，用于插入父组件传递的内容 -->
  </div>
</template>

<script>
export default {
  name: 'CustomComponent', // 组件名称
  props: {
    // 定义属性
    title: {
      type: String, // 属性类型
      required: true // 是否为必填项
    }
  }
}
</script>

<style scoped>
/* 仅作用于当前组件的样式 */
.custom-component {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了组件的HTML结构。<slot></slot> 是一个插槽，允许父组件向子组件传递内容。
• 脚本部分 (<script>)：使用 export default 导出一个Vue组件对象。props 用来定义组件的属性（如 title），这些属性可以从父组件传递给子组件。
• 样式部分 (<style scoped>)：scoped 关键字确保样式只应用于当前组件，不会影响全局或其他组件。

如果你需要进一步了解或有其他问题，请告诉我！