Javascript 根据文档，如何与vuejs插槽的正常功能相反？

在阅读了这篇文章之后，我并没有真正理解它们为什么有用，因为它们的功能似乎与我需要做的正好相反

对于那些熟悉ASP.NET的人，我真正想要的是一个

@部分

。也就是说，我在某个组件中定义了我的主页布局，在该组件中，我希望从子组件中控制一个小部分，因为标记的层次结构不便于控制

我希望我的应用程序中的标记与文档中的标记基本相同：

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

此页面的名称{{DataFromChildContext}

文档非常清楚，这在父文档中：

要向命名槽提供内容，我们可以在父项中的元素上使用槽属性：

重点矿山

---

我是不是找错人了，还是有办法使用本机VueJS功能实现这一点？我想定义子系统中插槽的内容和父系统中插槽的空间。

插槽提供了创建可重用组件的更简单方法。例如，一个模式，您可以在其中定义标题和正文，或者其他一些ui小部件，如自定义按钮

Vue（和其他FE/JS框架）的设计是数据驱动的，数据从上到下流动

---

听起来像是你在寻找的，一个源自底层的动作/数据会影响顶层的变化。实现这一点的方法是在顶层提供数据。有一些插件可以帮助解决这些问题，例如vuex和route。Vuex提供了一个全局可访问的存储，因此一个组件可以进行更改，而另一个组件可以侦听该更改，而不管关系是什么。路由器用于管理页面之间的导航，并允许轻松定义应在模板上下文中显示的组件。您也可以创建自己的实现，使用侦听器和emit、全局总线，甚至将函数作为道具传递。

我认为您真正需要的是由提供的命名视图

例如：

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

const Foo={template:'Foo'}
常量条={template:'Bar'}
const Baz={template:'Baz'}
常量路由器=新的VueRouter({
模式：“历史”，
路线：[
{路径：'/'，
//一条管线可以定义多个命名组件
//将被呈现为具有相应名称的s。
组成部分：{
默认值：Foo，
a:酒吧，
b:Baz
}
},
{
路径：'/other'，
组成部分：{
默认值：Baz，
a:酒吧，
b:福
}
}
]
})
新Vue({
路由器，
el:“#应用程序”
})

---

我知道，在ASP.NET中，这不是您要做的事情（页面直接呈现部分，而不是路由器逻辑），但我认为这与您在Vue中得到的最接近

A

slot

不是父子关系。它是一个包含（但不控制）任意内容的空间。它对于编写表示组件（如对话框）非常有用，您希望该组件控制所有的dialog-y行为，但不管对话框的内容是什么（它们可能有自己的行为）

如果有子组件，则不使用

插槽

，只需将其写入模板中即可。也就是说，你可能想得太多了（或者我可能不明白你想要实现什么）

我希望底层的数据以更高的级别显示，这一点您是正确的。我的项目中确实有Vuex，但从孩子那里扔进一些东西，只是为了在更高级别的组件中把它拉回来，这感觉很严厉。我选择了Vuex/store选项，对于我的具体简单案例，它工作得很好，即使不是那么优雅。谢谢，谢谢。我希望这些插槽能更像Aurelia的插槽，它几乎可以替代aspnet@sections。我正试图实现完全相同的（child->parent），我不得不承认，当我注意到它实际上是parent->child时，我很失望。我还想在我的根组件中定义页面的结构，然后在子组件中定义“将其放入该插槽”。最后，您决定使用什么选项？这将有助于我决定选择哪种方式@内特

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