vue函式元件，slot分發，只實現default slot的問題

獼猴桃豆老大發表於2018-12-21
Vue函式元件

vue的函式元件(functional: true),它是無狀態 (沒有響應式資料)，無例項 (沒有 this 上下文),元件需要的一切都是通過上下文傳遞。可以通過對現有的元件，進行包裝，返回一個新的元件。 當函式元件使用slot時，命名slot將會無效，所有的命名slot全部當做default slot。例如： ProgressBar元件： 。。。 this is progress1 

  <div class="progress-bg">
      <div class="progress-value0" :style="{width: frameWidth + '%'}">
          <div class="label-wrapper" v-if="frameWidth">
              {{frameWidth}}
          </div>
      </div>
  </div>
  <slot name="second">
      this is progress2
  </slot>
  。。。
  
Vue.component('Test-view',{
name:'Test-view',
functional: true,
props:{
    name:{
        type: String,
        default: 'default'
    }
},
render(createElement,ref){
    let data = ref.data ||{};
    const h = createElement;
    data.props = {
        game: 333,
        salary: '5%',
        value: 90,
        bgColor:'red',
        valueColor:'black'
    };
    data.style = {
        background: 'white',
        fontSize: '32px'
    }
    return h(ProgressBar,data,ref.children)

}
複製程式碼

})

使用TestView元件時：

this test-view

this test-second

ui最後展示的結果時： 插入的內容都被渲染在了default slot 中，命名slot second中沒有值。

因為vue中能夠實現name-slot的分發，因此翻看vue-router的原始碼發現解決辦法。不要使用自己的createElement方法，要使用parent的createElement方法，

Vue.component('Test-view',{ name:'Test-view', functional: true,// 函式元件 render(_,content){ let {data,porps,children,slots} = content; let h = content.parent.$createElement; return h('元件名'，data,children) } })

相關文章