时间戳

首页 > 解决方案 > 根据文档，如何与 vuejs 插槽正常执行的操作相反？

javascript - 根据文档，如何与 vuejs 插槽正常执行的操作相反？

问题描述

在阅读了有关插槽的文档后，我并没有真正理解它们为什么有用，因为它们的功能似乎与我需要做的完全相反。

对于那些熟悉 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 功能来完成这项工作？我想定义子中插槽的内容和父中的插槽空间。

标签： javascriptasp.nettypescriptvue.jsvuejs2

解决方案

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

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

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

推荐阅读