如何在组件中直接访问“布局”或“页面”功能？

// Layout组件
const Layout = ({ children }) => {
  return (
    <div>
      <header>Header</header>
      <nav>Navigation</nav>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
};

// 页面组件
const HomePage = () => {
  return <h1>Welcome to the Home Page!</h1>;
};

// 在App组件中使用Layout和HomePage组件
const App = () => {
  return (
    <Layout>
      <HomePage />
    </Layout>
  );
};

<!-- Layout组件 -->
<template>
  <div>
    <header>Header</header>
    <nav>Navigation</nav>
    <main>
      <slot></slot>
    </main>
    <footer>Footer</footer>
  </div>
</template>

<!-- 页面组件 -->
<template>
  <h1>Welcome to the Home Page!</h1>
</template>

<!-- 在App组件中使用Layout和HomePage组件 -->
<template>
  <Layout>
    <HomePage></HomePage>
  </Layout>
</template>