vue3 自定义组件

// 自定义 Vue 3 组件示例

<template>
  <div class="custom-component">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    content: {
      type: String,
      default: '默认内容'
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
};
</script>

<style scoped>
.custom-component {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 16px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 定义了组件的 HTML 结构。
   • 使用了双大括号语法 {{ }} 来绑定数据属性 title 和 content。
   • 添加了一个按钮，并绑定了点击事件 @click，触发 handleClick 方法。

2. 脚本部分 (<script>):

   • 导出了一个 Vue 组件对象。
   • 使用 props 定义了组件的外部传入属性 title 和 content。
   • methods 中定义了 handleClick 方法，当按钮被点击时会弹出一个提示框。

3. 样式部分 (<style scoped>):

   • 使用了 scoped 属性，确保样式只应用于当前组件。
   • 定义了一些基本的样式，如边框、内边距和外边距。