vue中的做用域插槽--理解(slot-scope)

項目中使用了elementUI,在其官方demo中的complexTable.vue有以下代碼:html

對於 slot-scope不是很理解,當時學vue的時候也沒有詳細看。如今用到了,必須學會,我的理解以下:vue

vue中的插槽有三種:單個插槽、具名插槽、做用域插槽,這個在官網上能看到segmentfault

(https://cn.vuejs.org/v2/guide/components.html#單個插槽)ide

做用域插槽簡單來講就是父組件只管顯示樣式,數據由子組件來提供。好比上面的代碼,el-table-column內的template是傳遞給其內部solt的顯示內容,可是scope的值是由el-table-column內部solt綁定的數據返回的。這個數據具體是什麼由el-table-column中指定,相似:ui

<slot name="**" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['1','2','3','4','5','6']
      }
    },
}

而scope就是上面代碼中的data。code

這是有一篇文章寫的很好:component

https://segmentfault.com/a/1190000012996217htm

相關文章
相關標籤/搜索