Vuejs - 将插槽传递给嵌套的子节点

时间:2017-07-31 12:56:18

标签: javascript vue.js

我有一个看起来像这样的模态组件

//modal component
<template>
   <slot></slot>
   <slot name='buttons'></slot>
</template>

我想将它用作向导

//wizard component
<template>
   <modal>
      <step1-state v-if='step === 1'/>
      <step2-state v-if='step === 2'/>
   </modal>
</template>

有没有办法让step1,step2等消耗buttons个插槽?

这似乎不起作用

//step1-state component
<template>
   <div>
       <span>Does it work?</span>
       <div slot='buttons'>
          <button>yes</button>
          <button>no</button>
       </div>
   </div>
</template>

2 个答案:

答案 0 :(得分:1)

经过一番研究后,我发现默认情况下这是不可能的。 我能够使用自定义渲染功能实现这一目标。

child-slot组件 - 这个组件需要放在父插槽内容中,它允许您格式化子组件的内容。您可以添加多个child-slot以将其与父内容混合。它需要定义具有不同值的ref属性。

use-slot组件 - 此组件用于告知哪些内容应作为child-slot内容传递给父级。内容将放在span元素中。 它需要namedcontainer属性。

named - 用于放置内容的广告位的名称

container - refchild-slot

无论子深度如何,

use-slot都会自动找到由named属性命名的第一个父插槽

  

子槽

<script>
    export default {
        render(createElement) {
            return createElement('span', {}, this.content);
        },
        data() {
            return {
                nodesToRender: {}
            }
        },
        computed: {
            content() {
                var result = [];
                for (var node in this.nodesToRender) {
                    result = result.concat(this.nodesToRender[node] || []);
                }
                return result;
            }
        }
    }
</script>
  

使用槽

<script>
    export default {
        abstract: true,
        props: {
            named: {
                type: String,
                required: true
            },
            container: {
                type: String,
                required: true
            }
        },
        render() {
            var parent = this.findParentOfSlot();
            var content = this.$slots.default;
            var self = this;
            this.$parent.$nextTick(function () {
                if (parent && parent.$refs && parent.$refs[self.container], parent.$refs[self.container].nodesToRender) {
                    Vue.set(parent.$refs[self.container].nodesToRender, self.$vnode.tag, content);
                }
            });
        },
        methods: {
            findParentOfSlot() {
                var parent = this.$parent;
                while (parent) {
                    if (parent.$slots && parent.$slots[this.named]) {
                        return parent.$parent;
                    }
                    parent = parent.$parent;
                }
                return parent;
            }
        }
    }
</script>

答案 1 :(得分:0)

据我所知,目前这是不可能的,并没有太多意义,因为它变得复杂和难以阅读。想象一下,在编写它3个月后查看这样的嵌套槽代码。如果您的步骤组件都需要此buttons插槽,则将其作为兄弟姐妹写在他们附近,并在您从此buttons位置更改时发送道具

顺便说一句,似乎有一个向导组件https://github.com/cristijora/vue-form-wizard,我自己不小心写了))