vue3 封装组件

// Vue 3 封装组件示例

// 引入 Vue 和必要的依赖
import { defineComponent, ref } from 'vue';

// 定义一个简单的按钮组件
export default defineComponent({
  name: 'BaseButton', // 组件名称
  props: {
    label: {
      type: String,
      required: true
    },
    variant: {
      type: String,
      default: 'primary' // 默认值为 'primary'
    }
  },
  setup(props) {
    // 定义一个响应式变量来跟踪按钮点击次数
    const clickCount = ref(0);

    // 定义一个方法，当按钮被点击时调用
    const handleClick = () => {
      clickCount.value++;
      console.log(`Button clicked ${clickCount.value} times`);
    };

    // 返回需要在模板中使用的属性和方法
    return {
      props,
      clickCount,
      handleClick
    };
  },
  template: `
    <button :class="variant" @click="handleClick">
      {{ label }} (Clicked {{ clickCount }} times)
    </button>
  `
});

// 解释说明：
// 1. 使用 `defineComponent` 定义组件，这是 Vue 3 推荐的方式。
// 2. `props` 定义了组件的输入属性，包括 `label` 和 `variant`。
// 3. `setup` 函数用于组合 API，可以定义响应式数据和方法。
// 4. `clickCount` 是一个响应式变量，用来记录按钮点击次数。
// 5. `handleClick` 方法会在按钮点击时调用，并更新点击次数。
// 6. 模板部分使用了插值表达式 `{{ }}` 来显示动态内容，并绑定了点击事件。