如何在嵌套组件中使用挂钩

// 在父组件中定义一个挂钩
const useCounter = () => {
  const count = ref(0);
  
  const increment = () => {
    count.value++;
  };
  
  return {
    count,
    increment
  };
};

// 在父组件中使用挂钩
const ParentComponent = {
  setup() {
    const { count, increment } = useCounter();
    
    return {
      count,
      increment
    };
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <ChildComponent />
    </div>
  `
};

// 在子组件中使用挂钩
const ChildComponent = {
  setup() {
    const { count, increment } = inject('counter');
    
    return {
      count,
      increment
    };
  },
  template: `
    <div>
      <p>Count from parent: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
};

// 在根组件中渲染父组件
const app = createApp({
  components: {
    ParentComponent,
    ChildComponent
  },
  template: `
    <ParentComponent v-slot="{ count, increment }">
      <p>Count from parent: {{ count }}</p>
      <button @click="increment">Increment</button>
    </ParentComponent>
  `
});

app.mount('#app');