Как сделать обратное тому, что слот vuejs обычно делает в соответствии с документацией?

Question

После прочтения документации по слотам я ушел, не очень понимая, почему они полезны, потому что кажется, что они функционируют совершенно противоположно тому, что мне нужно сделать.

Для тех, кто знаком с ASP.NET, я действительно хочу @section.То есть мой макет главной страницы определен в каком-то компоненте, и в этом компоненте я хочу управлять одним небольшим разделом внутри дочернего элемента, где иерархия разметки не делает это простым.

Я хочу, чтобы в принципеэта же разметка в моем приложении, как и в документах:

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

Проблема в том, что я хочу, чтобы это было в моем компоненте более высокого уровня, а затем в дочернем элементе я хочу указать содержимое, которое идет в заголовке, например:

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

Документация довольно ясна, это относится к PARENT:

Чтобы предоставить контент для именованных слотов, мы можем использовать атрибут slot в элементе в родителе:

мой микс

Я лаю не на том дереве или есть способ заставить эту работу использоватьродные функции VueJS?Я хочу определить содержимое слотов в дочернем элементе и пространство слотов в родительском элементе.

Answer 1

Я думаю, что вы действительно ищете именованные представления, предоставленные VueRouter .

В качестве примера:

<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>

И в коде маршрутизатора:

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'
})

Я понимаю, что в ASP.NET это не так, как вы делаете (в этомстраница непосредственно отображает разделы, а не логику маршрутизатора), но я думаю, что это так же близко, как вы получите в Vue.

Answer 2

A slot не является отношением родитель-ребенок.Это пространство для хранения (но не управления) произвольного содержимого.Это полезно для написания компонентов представления, таких как диалог, где вы хотите, чтобы компонент управлял всем поведением диалогового окна, но это не имеет значения, каково содержимое диалога (и они могут иметь свое собственное поведение).

Если у вас есть дочерний компонент, вы не используете slot, вы просто записываете его в шаблон.То есть вы, возможно, слишком обдумываете это (или я не понимаю, чего вы пытаетесь достичь).

<div class="container">
  <header>
    <header-child></header-child>
  </header>

Answer 3

Слоты предлагают более простой способ создания повторно используемых компонентов.Например, модальный, где вы можете определить заголовок и тело, или какой-то другой виджет пользовательского интерфейса, например, настраиваемую кнопку.

Дизайн Vue (и других сред FE / JS) управляется данными, а данныетечет сверху вниз.

Звучит так, как будто вы ищете, то, что действие / данные, которые происходят внизу, влияют на изменения на верхнем уровне.Способ сделать это - сделать данные доступными на верхнем уровне.Существуют плагины, которые могут помочь в таких случаях, такие как vuex и route.Vuex предоставляет глобально доступное хранилище, поэтому один компонент может внести изменение, а другой компонент может прослушать это изменение, и не имеет значения, каковы отношения.Маршрутизатор используется для управления навигацией между страницами и позволяет легко определить, какой компонент должен отображаться в контексте шаблона.Вы также можете создать свою собственную реализацию, используя слушателей и emit, глобальную шину или даже передав функцию в качестве опоры.