有很多次棒掠，我了解到很多公司想要提高他們Vue變成的效率轮蜕。
這是一個(gè)非常開(kāi)放性的問(wèn)題举瑰，但是至少有一部分是可以通過(guò)分辨功能性的組件是否行非常頻繁地編譯來(lái)達(dá)到四濒。
我們有一整套的理論在你的應(yīng)用中去復(fù)用組件，讓你可以把通用邏輯放在里面欠气，以達(dá)到非常靈活地適配請(qǐng)他應(yīng)用堕汞。
Vue.js 有slots 特性就是為了當(dāng)使用這個(gè)組件的時(shí)候可以重新定義它的結(jié)構(gòu)，但是他們自己是非常受限的晃琳。
有時(shí)讯检，為了定義如何渲染一個(gè)組件你需要定義data和state。
如果你不知道slots卫旱，我建議你先從官方文檔上學(xué)習(xí)一下the Vue.js docs人灼。
Scoped slots 是一個(gè)Vue中非常牛的特性。他們像普通的solts顾翼，同時(shí)他們也可以接收屬性（數(shù)據(jù)）投放。
讓我們編譯一個(gè)Clock.vue組件來(lái)演示一下，一個(gè)簡(jiǎn)單的計(jì)時(shí)器:
<template>
<div class="clock">
<slot :time="time">
<p>Default slot</p>
<p>Time: {{ time.toLocaleTimeString() }}</p>
</slot>
</div>
</template>
<script>
export default {
data: () => ({
time: new Date()
}),
created() {
setInterval(() => {
this.time = new Date(this.time.getTime() + 1000);
}, 1000);
}
};
</script>
你可能已經(jīng)注意到<slot :time="time">這一行代碼适贸，它接收了一個(gè) time屬性灸芳。這就是這個(gè)組件傳遞一個(gè)time數(shù)據(jù)到這個(gè)組件并使用它，所有的timer的邏輯都在這個(gè)組件中拜姿。
你可能也意識(shí)到烙样，這個(gè)組件已經(jīng)自己渲染，而且這個(gè)slot有默認(rèn)的內(nèi)容蕊肥。
但是如果我們保持timer的數(shù)據(jù)邏輯還在這個(gè)組件中的同時(shí)谒获，重新定義他的渲染呢？
我們傳遞一個(gè) time 屬性給這個(gè)slot，我么可以用v-slot在這個(gè)slot的根元素（這里是template）上批狱，裸准。所以，任何地方你需要渲染這個(gè) Clock組件赔硫，你需要這樣做：
<template>
<Clock>
<template v-slot="{ time }">
<p><b>Slot override!</b></p>
<p>Date: {{ time.toLocaleDateString() }}</p>
<p>Time: {{ time.toLocaleTimeString() }}</p>
</template>
</Clock>
</template>
v-slot接收了所有的傳遞給 Clock組件的屬性炒俱。因?yàn)檫@個(gè)是一個(gè)js對(duì)象，所以我們可以用對(duì)象結(jié)構(gòu)賦值操作符來(lái)獲取爪膊。
你看到Scoped Slots的厲害之處了嗎权悟？你可以做更牛逼的事情，例如 render-less組件惊完，你會(huì)在接下來(lái)的一個(gè)實(shí)用筆記中看到??僵芹。
如果想自己個(gè)跑一下這個(gè)代碼处硬，請(qǐng)點(diǎn)擊CodeSandbox小槐。
Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!
See you next week.
Alex
