26
4
I have a responsive-menu component which I want to use named slots inside of this up my template markup:
我有一个响应菜单组件，我想在我的模板标记中使用命名槽：
个人中心
文章发布
退出<template>
<div class="responsive-menu">
<div class="menu-header">
<slot name="header"></slot>
</div>
</div>
</template>
Whenever I try my named slot like this it work perfectly fine:
每当我像这样尝试我的命名槽时，它都工作得很好：
<responsive-menu>
<h3 slot="header">Responsive menu header</h3>
</responsive-menu>
However as soon as I wrap it with a class nothing shows up anymore.
然而，一旦我用一个类来包装它，就什么都不会出现了。
<responsive-menu>
<div class="container">
<h3 slot="header">Responsive menu header</h3>
</div>
</responsive-menu>
What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?
这里发生什么事情？难道我不应该只包装命名组件吗？我的命名插槽似乎需要是我的Vue组件的直接子组件？
Umm.. I reproduced your case and it works?
嗯..。我复制了你的案子，它起作用了？
@AmreshVenugopal You are using a header slot, yet your html does not have any reference to this slot. Meaning it will simply fall back to it's default slot content.
@AmreshVenugopal您正在使用标题栏，但您的html没有任何对此栏的引用。这意味着它将简单地后退到其默认的槽内容。
By the way I am using webpack with .vue components I will try if I can get a webpackbin file up and running.
顺便说一句，我正在使用带有.VUE组件的webpack，如果我能启动并运行一个WebPackbin文件，我会试一试。
The only thing I can think is OP is actually doing <responsive-menu><another-component><slot>...</slot></another-component></responsive-menu>. If that's not the case this works just fine.
我唯一能想到的就是OP实际上是在做
I hadn't registered the component, now I see it blanked out.
我还没有注册组件，现在我看到它被删除了。
It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.
它不起作用，因为您的“包装槽”不是响应菜单标签的直接子标签。
try something like that:
试着这样做：
<responsive-menu>
<div class="container" slot="header">
<h3>Responsive menu header</h3>
</div>
</responsive-menu>
Jsfiddle
It works with Vue >= 2.6. Just upgrade vue and vue-template-compiler.
它适用于VUE>=2.6。只需升级VUE和VUE模板编译器即可。
You could use it like v-slot because slot syntax is deprecated as mentioned here:
您可以像使用v-槽一样使用它，因为槽语法已弃用，如下所述：
<responsive-menu>
<div class="container">
<h3 v-slot:header>Responsive menu header</h3>
</div>
</responsive-menu>
or Alternatively, a shorthand:
或者，一种速记：
<responsive-menu>
<div class="container">
<h3 #header>Responsive menu header</h3>
</div>
</responsive-menu>
The slot doesn't need to be a direct child.
插槽不必是直接子对象。
I have tried it out and it does not need to be a direct child: webpackbin.com/bins/-KhXJnhf2meOIC9h5XS0 There is a problem with this example though because all the markup in my template surrounding the named slot is completely gone. And in my current codebase I still can't get it working properly.
我已经尝试过了，它不需要是直接的子级：webpack bin.com/bins/-KhXJnhf2meOIC9h5XS0这个示例有一个问题，因为我的模板中围绕命名槽的所有标记都完全消失了。在我目前的代码库中，我仍然无法让它正常工作。
If slot isn't direct child, slot attribute is ignored and ENTIRE content of component tag is used as content for default slot in component template markup.
如果插槽不是直接子项，则忽略插槽属性，并将组件标签的整个内容用作组件模板标记中默认插槽的内容。
@Stephan-v This fiddle should prove the answer.
@Stephan-v这把小提琴应该证明了答案。
@AmreshVenugopal So how would you make that particular fiddle working properly? Neverind I tried to remove the container and everything works than. I am really wondering if this is a bug or if this is meant to happen though.
@AmreshVenugopal，那么你如何让这把小提琴正常工作呢？不管怎么说，我试着把容器移开，但一切都很正常。我真的很想知道这是一个错误，还是这是注定要发生的。
26
4
0
我正在学习 Vue.js，并且正在努力寻找一种组织代码的方法。我试图让一切尽可能模块化，所以在制作 slider 时我做了以下事情: export
我有一个像这样定义的 Web 组件自定义元素。 class Dropdown extends HT
我遇到了这样的崩溃: #0 0x90b05955 in __gnu_debug::_Safe_iterator_base::_M_detach #1 0x90b059ce in __gnu_deb
正如标题中所写 - “信号和插槽”是一种简单的响应式(Reactive)编程方式吗？ 最佳答案 Signals/Slots是 Observer Pattern 的实现. 来自维基 Reactive P
我有一个关于太阳系行星列表的 intent 。 { "intent": "PlanetIntent", "slots": [ { "nam
我们的消费计划中有一个 Azure Function v3 实例，其中包括一个暂存槽以减少部署期间的停机时间。 我们的部署流程是: 将代码部署到暂存槽 启动暂存槽 将暂存槽与生产槽交换 停止暂存槽 我
我们的消费计划中有一个 Azure Function v3 实例，其中包括一个暂存槽以减少部署期间的停机时间。 我们的部署流程是: 将代码部署到暂存槽 启动暂存槽 将暂存槽与生产槽交换 停止暂存槽 我
我遇到一个同步组件 JavaScript 在实际显示之前加载的问题。 使用 dynamic-import 导入的组件在需要时使用 v-if 显示以加载它们。当它们被显示时，它们的 JavaScript
我有 6 个 subdag。它们中的每一个都包含一个带有 pool='crawler' 的任务。这需要大量资源，所以我创建了一个池 crawler只有 1 个插槽。 当我运行 DAG 时，似乎绕过了池
Vue 对象有一个非常有用的成员，叫做 $attrs。什么$attrs does 包含所有未被识别为当前组件 props 的属性。 $attrs 的一个很好的例子是 here . 我想知道 $scop
我有一个运行 Node.js 应用程序的 Azure Function App v3，该应用程序具有生产槽和阶段槽。使用在部署中心创建的操作将其部署到 GitHub。我有一项针对 prod 的部署操作
我有一个运行 Node.js 应用程序的 Azure Function App v3，该应用程序具有生产槽和阶段槽。使用在部署中心创建的操作将其部署到 GitHub。我有一项针对 prod 的部署操作
我有一个事件架构: owner: { type: Schema.Types.ObjectId, ref: 'User', required: true }, participa
我想测试这个FooComponent: 它是这样使用的(例如在 ParentComponent 中): 因此，我想测试我的组件对从 slot Prop 调用此“fn
我有一个意图，其中包含三个必需的插槽(我们称它们为:slot_a、slot_b、slot_c)，所有类型都是 @系统编号。当检测到意图时，系统会提示我询问缺少的插槽: What's slot_a? 我
我有这个预订表结构 |ID|timeBooked | duration | |2 |2013-05-09 11:10:00| 30 | |1 |2013-05-09 14:
突然开始在所有 Azure App Services 中持续发生使用Deployment Slots . Error Message: "Failed swapping site. Error: Ca
我在我的azure应用程序服务中创建了多个插槽(测试、阶段和产品)。同样，我为每个环境创建了各自的 web.config 文件。我正在测试环境槽中通过 octopus 部署工具部署我的应用程序，因此最
所以我正在尝试使用 C++ 学习 Qt Framework。我正在了解信号和插槽，但我很难创建自定义插槽。因此，当我按照一些教程进行操作时，我的程序出现了以下错误: QObject::connec
如何引用 Vue.js 中的文本？ Vue.component('component', { template: ``, created: function() { // i woul
我是一名优秀的程序员,十分优秀！