我有一个看起来像这样的模态组件
//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>
答案 0 :(得分:1)
经过一番研究后,我发现默认情况下这是不可能的。 我能够使用自定义渲染功能实现这一目标。
child-slot
组件 - 这个组件需要放在父插槽内容中,它允许您格式化子组件的内容。您可以添加多个child-slot
以将其与父内容混合。它需要定义具有不同值的ref
属性。
use-slot
组件 - 此组件用于告知哪些内容应作为child-slot
内容传递给父级。内容将放在span
元素中。
它需要named
和container
属性。
named
- 用于放置内容的广告位的名称
container
- ref
值child-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,我自己不小心写了))