javascript - Vue - 在渲染之前修改插槽的正确方法 - 目标:以编程方式添加转换组键
问题描述
我有一个包装器组件,它只是一个<transition-group>
通过其默认插槽接受内容的组件。通过 default slot 传递的内容是一系列的二级 vue 组件。
由于转换组中的项目需要键控,我将如何将键添加到插槽项目?由于它们是开槽的并且没有在 v-for 循环中呈现,我认为需要以编程方式添加键。
下面是一个可以玩的片段。您将在 created() 挂钩中看到我的方法,该方法似乎适用于初始页面加载/渲染,但是当我的开发环境中的热重载刷新时,密钥丢失并且有关转换组子项需要密钥的错误又回来了.
有没有更好的方法来实现这一点,让热重载快乐?也许我不应该担心热重载,因为它只是一个开发功能,但我的想法是,如果热重载不喜欢我的方法,那么我可能做错了,可能有更好的方法。
想法?
我也只是好奇在生命周期中何时是对插槽节点进行修改的正确时间。此外, node.key 是应用唯一键的正确位置吗?插槽节点中的哪个属性是要编辑的正确属性?(即,当在 v-for 循环中设置键时,组件数据属性中也设置了一个“键”)
非常感谢您提供的任何见解!
Vue.component('wrapper-component', {
render(h) {
return h('transition-group', this.$slots.default)
},
// my attempt at providing a unique key for transition children is in created() hook below
// this works on itital page load/rendering - but breaks when hot-reload refreshes my development site
// uncomment created() hook to see my approach in action - works here on page reload, but does not hold up with hot-reload (i.e. once hot-reload refreshes, the transition items no longer have their unique keys)
/*
created() {
this.$slots.default = this.$slots.default.map((node, index) => {
node.key = `${node.tag}-${index}`
return node
})
}
*/
});
Vue.component('child-item', {
render(h) {
return h('div', this.$slots.default)
}
});
new Vue({
el: "#app"
});
div {
display: block;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper-component>
<child-item>My Child 1</child-item>
<child-item>My Child 2</child-item>
<child-item>My Child 3</child-item>
<child-item>My Child 4</child-item>
</wrapper-component>
</div>
解决方案
尝试添加beforeUpdate
钩子:
beforeUpdate() {
this.$slots.default = this.$slots.default.map((node, index) => {
node.key = `${node.tag}-${index}`
return node
})
}
推荐阅读
- google-chrome - 如何检查是否在 Chromium/Chrome 中嵌入/启用了 Google 密钥?
- reactjs - 输入“承诺”
' 不能分配给在锚标记中键入 'string' - python - 设置 UTF-8 编码后未写入 CSV 文件的更改
- reactjs - 在 ReactJs 中单击外部时输入值消失
- python - `s = (iowa_file_data.dtypes == 'object')` 如何使`s` 成为`Series` 类型的变量
- alexa - 在 Alexa 中发送通知时如何在 Alexa 屏幕设备上不显示 ssml 标签
- sql - 使用更新/删除级联创建两个外键约束
- javascript - 如何在使用 jquery 刷新页面后保持复选框在模式中的选中状态?
- python - 如何在 R-markdown 的 html 输出中隐藏 matplotlib 给出的附加信息?
- json - Flutter 中 Rest API 的响应错误处理