Vue-渲染前修改插槽的正确方法-目标:以编程方式添加过渡组键

时间:2019-03-06 17:06:06

标签: javascript vue.js

我有一个包装器组件,它只是一个<transition-group>组件,可通过其默认插槽接收内容。通过默认位置传递的内容是一系列辅助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>

1 个答案:

答案 0 :(得分:1)

尝试添加beforeUpdate挂钩:

  beforeUpdate() {
    this.$slots.default = this.$slots.default.map((node, index) => {
      node.key = `${node.tag}-${index}`
      return node
    })
  }