javascript - Hur man gör motsatsen till vad en vuejs-slot normalt gör enligt dokumentationen?

Efter att ha läst dokumentationen om slots har jag kommit bort utan att egentligen förstå varför de är användbara, eftersom det verkar som att de fungerar precis motsatt mot vad jag behöver göra.

För de som är bekanta med ASP.NET vill jag egentligen ha en @section. Det vill säga att jag har min huvudsakliga sidlayout definierad i någon komponent, och inom den komponenten vill jag kontrollera en liten sektion från barnet där hierarkin av markup gör detta svårt.

Jag vill ha i princip samma markup i min applikation som i dokumentationen:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Problemet är att jag vill att detta ska leva i min högre nivå-komponent, och sedan vill jag inom barnet specificera innehållet som går i rubriken, till exempel:

<template>
    <div>
        <h1 slot="header">Name Of This Page {{ DataFromChildContext }}</h1>
        <div id="remainder-of-child">
        <!snip...-->
        </div>
    </div>
</template>

Dokumentationen är ganska tydlig, detta går i FÖRÄLDERN:

För att tillhandahålla innehåll till namngivna platser kan vi använda slot-attributet på ett element i föräldern:

kursivitet min

Spelar jag fel eller finns det ett sätt att få detta att fungera med inbyggda VueJS-funktioner? Jag vill definiera innehållet i slots i barnet och slotutrymmet i föräldern.

Svar #1

Jag tror att det du verkligen letar efter är namngivna vyer, tillhandahållna av VueRouter.

Som ett exempel:

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
      <router-link to="/">/</router-link>
    </li>
    <li>
      <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

Och i routerns kod:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/',
      // a single route can define multiple named components
      // which will be rendered into <router-view>s with corresponding names.
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
        b: Foo
      }
    }
  ]
})

new Vue({
    router,
  el: '#app'
})

Jag inser att i ASP.NET gör man inte så (i det att sidan direkt renderar sektionerna, snarare än router-logiken), men jag tror att det är så nära man kommer i Vue.

Svar #2

Slots erbjuder ett enklare sätt att skapa återanvändbara komponenter. Till exempel en modal, där du kan definiera header och kropp, eller någon annan användargränssnittskomponent som en anpassad knapp.

Designen av Vue (och andra FE/JS-ramverk) är datadriven, och datan flödar uppifrån och ner.

Det låter som att det du letar efter är att en handling/data som härstammar från botten påverkar förändringar på toppnivån. Sättet att göra detta är att göra datan tillgänglig på toppnivån. Det finns plugins som kan hjälpa i dessa fall, såsom vuex och route. Vuex tillhandahåller ett globalt tillgängligt lager, så att en komponent kan göra en förändring och en annan komponent kan lyssna på den förändringen, och det spelar ingen roll vilken relation de har. Router används för att hantera navigering mellan sidor och tillåter att enkelt definiera vilken komponent som ska visas inom en mallkontext. Du kan också skapa din egen implementation, med hjälp av lyssnare och emit, en global buss, eller till och med genom att skicka en funktion som en prop.

Relaterade artiklar