// useBase.js - 这不是一个组件，而是一个可复用的逻辑函数
import { ref, onMounted } from 'vue';

export function useBase() {
  const baseMessage = ref('Hello from Base Logic!');
  const baseCount = ref(0);

  function baseIncrement() {
    baseCount.value++;
  }

  onMounted(() => {
    console.log('Base logic mounted');
  });

  // 将需要暴露的变量和方法返回
  return {
    baseMessage,
    baseCount,
    baseIncrement
  };
}

<template>
  <div>
    <p>{{ baseMessage }}</p>
    <p>Child count: {{ childCount }}</p>
    <button @click="baseIncrement">Base ++</button>
    <button @click="childIncrement">Child ++</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 导入并“组合”基类逻辑，而不是继承它
import { useBase } from './useBase';

// 使用基类逻辑，并解构出其返回的内容
const { baseMessage, baseCount, baseIncrement } = useBase();

// 子组件自己的逻辑
const childCount = ref(10);
const childIncrement = () => {
  childCount.value++;
};
</script>