title: Conditionally showing/hiding from child to parent
body: <p>I have the below setup with vue-router:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- App.vue --&gt;
  &lt;div&gt;
    &lt;header&gt;
        This is my header.
    &lt;/header&gt;
  
    &lt;main&gt;
      &lt;router-view /&gt;
    &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I then have a Home route:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  &lt;/script&gt;
  &lt;template&gt;
    &lt;div&gt;Welcome to the homepage!&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Which is loaded in my <code>routes.js</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>import Home from './views/Home.vue'
  import NotFound from './views/NotFound.vue'
  
  export const routes = [ 
    { path: '/', component: Home, meta: { title: 'Home' } },
    { path: '/:catchAll(.*)*', name: '404', component: NotFound },
  ]
  </code></pre>
  <p>Now my question is this:</p>
  <p>How can I conditionally show the <code>&lt;header&gt;&lt;/header&gt;</code> section in my child components? (Such as the <code>Home.vue</code> view:</p>
  <p>Something like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
  &lt;/script&gt;
  &lt;template :header=&quot;false&quot;&gt; &lt;!-- This will disable the header in the App.vue file --&gt;
    &lt;div&gt;Welcome to the homepage!&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>