這篇文章不是單純把文件的話和api拿來翻譯和演示，而是談談我對於slot-scope的使用場景的個人理解，如果理解錯誤，歡迎討論！
vue的插槽slot，分為3種
前兩種很好理解，無論就是子元件裡定義乙個slot佔位符，父元件呼叫時，在slot對應的位置填充模板就好了。
作用域插槽的慨念，文件卻只有一句簡單的描述
有的時候你希望提供的元件帶有乙個可從子元件獲取資料的可復用的插槽。
網路上大多數文章，也是千篇一律的翻譯這句話，可是僅憑這一句話，我想象不到slot-scope的使用場景。
下面是2個父子的vue元件，先解釋一下2個元件做了什麼事情
我建議從資料流動的角度，理解插槽作用域的使用方式，（先學會怎麼用，暫時不用理解為什麼要這麼用,使用場景是第二部分）
所以資料的流動經歷了
好啦，這就是slot-scope的使用方法，就這麼簡單，完結撒花~
我貼出全部**，方便大家自己研究
父元件的原始碼，也就是呼叫者
✓}
當你要給同事封裝乙個列表元件，你就需要使用作用域插槽（注意是列表或者類似列表的元件）
你開發的這個列表元件要如何使用呢？
一般來說作為列表元件的呼叫者，你的同事先做ajax請求，拿到乙個這樣的陣列
todos: [,,
,]
列表內部肯定會v-for去幫你的同事渲染這個陣列嘛。 就類似element-ui裡的table元件一樣
問題的關鍵就在這裡
列表元件的迴圈，是發生在元件內部的，所以通過 v-for="todo in todos" ,列表元件很容易拿到每一項todo，但列表拿到資料沒用呀，列表只是乙個瓜皮，它又不懂業務邏輯
這個資料是你同事的業務資料，所以這個資料必須得交給元件的呼叫者，也就是把資料交給你的同事才對。
那麼你怎樣才能把每一項的todo資料給傳遞出去呢？
你會發現沒有辦法！
無論是用$emit、vuex還是localstorage，可以考慮一下，會發現沒有合適的時機，能讓你把todo傳遞出去
所以為了應對這個場景下，發明了作用域插槽，列表元件可以通過傳遞todo出去
你的同事可以通過 slot-scope="slotsprops"拿到todo。
回答幾個疑問，其實如果你看懂上面的問題，應該可以回答下面的問題。這也是我曾經的疑問
疑問1：一般不是我們傳引數來呼叫元件嗎？為什麼元件還把資料傳遞回來？
的確，呼叫ui元件時一般是我們傳遞配置引數給他們。
但是就像elemnt-ui的table元件，你把陣列傳遞給table後，是不是有時候需要拿到某一行的row物件
並根據row物件裡的字段，來判斷一些內容的顯示隱藏？
因為迴圈的過程發生在table元件內部，所以table元件可以方便的獲取到每一項資料，但是這些資料最終不是給元件的，而是我們自己要用的業務資料。所以也需要乙個方式，讓呼叫者能拿到自己想要的資料
疑問2： 既然子元件最終還要把我給他的資料，再返還給我，那我當初還幹嘛給它，能不能就自己在父元件裡玩？
如果你不把資料給子元件當然可以。但是就等於拋棄掉了子元件的封裝，只能你直接在父元件自己寫乙個列表
畢竟你不把資料給子元件，子元件還渲染個錘子？沒有父子關係的話，也就不用什麼插槽了。
但是咱不是為了封裝後，可以復用嘛，總不能永遠不用元件嘛
疑問3： 父元件需要子元件的資料？那不會有$emit和vuex嘛，為什麼要有slot-scope？
$emit和vuex是資料傳遞的一種方法，但是你可以嘗試用$emit和vuex把todo傳遞給父元件。
你會發現的確沒有合適的鉤子、時機來$emit資料
這種說法，會讓我覺得slot-scope跟emit和vuex是一類東西
這些舉例子的不恰當之處，我覺得是不應該把資料定義在子元件裡。
因為真正的使用場景下，子元件的資料都是來自父元件的。作為元件內部應該保持純淨。
就像element-ui裡的table元件，肯定不會定義一些資料在元件內部，然後傳遞給你。
table元件的資料都是來自呼叫者的，然後table會把每一行的row，在開發者需要時，傳遞出去。
這些例子雖然不是錯誤，但是我覺得反而不利於理解slot-scope
vue中的slot scope的使用
說之前 先說下什麼是內容分發 slot內容分發 父元件的內容和子元件的模板混在一起使用 就叫做內容分發 經常碰見的就是 vue.component child 最後頁面只會顯示乙個hello world 正常裡面的hello vue.js是不會被渲染出發的 如果想讓渲染出來的話 就得使用內容分發 s...
Vue的slot scope的場景的個人理解
vue的插槽slot，分為3種 前兩種很好理解，無論就是子元件裡定義乙個slot佔位符，父元件呼叫時，在slot對應的位置填充模板就好了。作用域插槽的慨念，文件卻只有一句簡單的描述 有的時候你希望提供的元件帶有乙個可從子元件獲取資料的可復用的插槽。網路上大多數文章，也是千篇一律的翻譯這句話，可是僅憑...
使用slot scope複製vue中slot內容
有時候我們的vue元件需要複製使用者傳遞的內容。比如我們工程裡面的輪播元件需要使用複製的slot來達到迴圈滾動的效果 使用者關注輪播內容的靜態效果，元件負責讓其滾動起來 元件 使用者 123這種實現方式對於初始化的資料是沒問題的，但是不支援slot內容的動態繫結，這是因為 因此當元件使用者在宣告節點...