javascript - Vue 命名插槽注意事项?
问题描述
当使用带有 Vue 的命名插槽时(使用旧的、更详细的组件插槽 API),如果我有一个使用这样的模板定义的可重用组件:
<template>
<div v-for="field in formFields">
<slot name="`${field.key}_PREPEND`">
<span hidden></span>
</slot>
<slot name="`${field.key}_FIELD`">
<slot name="`${field.key}_LABEL`">{{ field.label }}</slot>
<slot name="`${field.key}_CONTROL`">
<input v-if="field.type === 'text'" v-model="model[field.key]"></input>
<input type="checkbox" v-else-if="field.type === 'checkbox'" v-model="model[field.key]"></input>
</slot>
</slot>
<slot name="`${field.key}_APPEND`">
<span hidden></span>
</slot>
</div>
</template>
(这本质上是我拥有的自动表单生成组件的镂空版本)
然后我可以像这样重用这个组件:
<auto-form
:fields="someArray"
:model="someObject"
>
<template slot="Name_PREPEND"> This goes before the name field </template>
<template slot="Name_FIELD"> For some reason this isn't being rendered, the default slot markup is</template>
<template slot="Name_APPEND"> This goes after the name field </template>
</auto-form>
出于某种原因,使用上面的标记 ( <auto-form>
),插槽 " ${field.key}_FIELD
" 被忽略。
如果我像这样更改 _PREPEND 字段的内部标记
<slot name="`${field.key}_PREPEND`">
<span hidden>
<slot name="`${field.key}_CONTENT`"></slot>
</span>
</slot>
我同样不能覆盖 _PREPEND 插槽(但可以覆盖 _CONTENT)
这仅仅是 Vue 组件插槽的限制吗?ie 是否不允许嵌套组件槽?
在这种特殊情况下,限制将阻止使用此 AutoForm 组件的开发人员说,通过 _FIELD 插槽同时覆盖控件和标签(对于我的使用,我想添加逻辑,使特定字段基于值表单中的其他字段)
解决方案
万一其他人遇到这个问题,这有点偷偷摸摸。
看起来如果您对应该覆盖插槽的标记进行条件渲染,则默认插槽将在没有条件渲染时呈现在其位置。
因此,简单的解决方案是在您尝试覆盖组件插槽时使用v-show
而不是。v-if
(与最初怀疑的嵌套组件槽无关)
推荐阅读
- objective-c - 请求关联构建器开始收集时的授权错误
- c# - 我可以在 xaml 代码中禁用 WPF 组合框的第一项吗?
- c# - 如何查看数据集函数的性能利用率
- python - 如何在不使用 reverse=True 参数的情况下以相反的顺序对字符串列表进行排序?
- javascript - 将 YES/NO 转换为 true/false 的更优雅的方法
- javascript - 从快捷方式更改异步 n 承诺
- javascript - 如何对从 AJAX 调用返回的数据进行分组?
- bash - 如何使用 bash 脚本将一个文件内容粘贴到不同的文件中?
- python - 熊猫 - 单列问题内的划分
- python - 如何修复“IndexError:列表索引超出范围”