[翻譯] VUE：如何把slot從父組件傳到子組件

原文地址： Vue: Pass Slots through from Parent to Child Components

場景

有A、B、C三個component，分別包含不一樣的slot:

const A = {
  template: `<div><slot name="a">Default A Content</slot></div>`
}

const B = {
  template: `<div><slot name="b">Default B Content</slot></div>`
}

const C = {
  template: `<div><slot name="c">Default C Content</slot></div>`
}
複製代碼

還有一個wrapper component W，代碼以下：

Vue.component('W', {
  props: ['child'],
  template: `<component :is="child" />`
})
複製代碼

A, B, C會傳入W，但問題是W並不知道A, B, C會用哪一個slot。

問題

若是你嘗試着這樣寫，

<W :child="A">
  <div slot="a">Special A Content</div>
</W>
複製代碼

輸出的結果確是Default A Content, 緣由是slot a被當成了W的slot，而不是A的slot。

方案

因此咱們須要想辦法，將傳給W的slot，接着傳下去，讓子的component可以接收到。

代碼以下：

Vue.component('W', {
  props: ['child'],
  template: `<component :is="child"> <slot v-for="(_, name) in $slots" :name="name" :slot="name" /> </component>`
})
複製代碼

但上述代碼還有一個小問題，就是不能識別scope slot中定義的變量，好比

const D = {
  template: `<div><slot name="d" emoji="🎉">Default D Content</slot></div>`
}
複製代碼

其中的emoji就不能被slot中的代碼識別。

解決的方法也是會者不難。

<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
複製代碼

因而，最終完整版的代碼以下：

Vue.component('W', {
  props: ['child'],
  template: ` <component :is="child"> <slot v-for="(_, name) in $slots" :name="name" :slot="name" /> <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"> <slot :name="name" v-bind="slotData" /> </template> </component>`
})
複製代碼

後記

新工做入職後，暫時沒有前端程序員，只能本身琢磨着寫起來，還好兩年前本身的前端底子還在，vue上手也是快。

用vue寫了快了兩週的prototype後，真心以爲vue+vuex比react+redux好上手多了。雖然一開始仍是沒有從angular雙向綁定的思路轉變過來，很不習慣，但上手了之後發現，有了vuex這都不是事，真心好用！

藉着眼下邊摸索邊作項目機會，也想順手整理一下本身學到知識和技巧。因而，就從翻譯這篇文章開始。

一些經常使用的code sheet會陸續整理到vue code snippet。