2017-07-31 46 views
1

我有一個模態分量,看起來像這樣Vuejs - 通槽嵌套子

//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的方式,步驟2等消耗buttons插槽?

這似乎並不工作

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

爲什麼這樣做時,你可能只是有你'第一步,state'和'第二步,state'組件'modal'直接,然後用只用一個'div'或者什麼作爲'wizard'中的包裝? –

+0

@lamelemon這就是我最終做的,但問題依然存在。在我看來這是可能的用例。 – EOG

回答

0

經過一番研究,我發現這是默認情況下不可能的。 我能夠使用自定義渲染功能實現這一點。

child-slot組件 - 這個需要放在父槽內容中,它使您能夠格式化子組件的內容。您可以添加多個child-slot以將其與父級內容混合使用。它需要定義具有不同值的ref屬性。

use-slot組件 - 這個是用來告訴哪些內容應該傳遞給父母作爲child-slot的內容。內容將被放置在span元素內。 它需要namedcontainer屬性。

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> 
0

據我所知,這是不可能的目前因爲它變得複雜,難以閱讀並沒有什麼太大的意義。想象一下,在寫了3個月後,看看這樣的嵌套槽碼。如果同時你的一步組件需要這個buttons插槽中,然後把它寫成接近他們的兄弟姐妹,每當你從這個buttons插槽

通過方式的變化送道具,似乎有一個精靈組件在那裏https://github.com/cristijora/vue-form-wizard,不慎被寫入我自己))