經過一番研究,我發現這是默認情況下不可能的。 我能夠使用自定義渲染功能實現這一點。
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>
來源
2017-10-13 11:36:58
EOG
爲什麼這樣做時,你可能只是有你'第一步,state'和'第二步,state'組件'modal'直接,然後用只用一個'div'或者什麼作爲'wizard'中的包裝? –
@lamelemon這就是我最終做的,但問題依然存在。在我看來這是可能的用例。 – EOG