其實這個slot 被翻譯為 插槽，類似于接口。
？ 為什麼使用slot ？
插槽的目的是讓我們原來的裝置具備更多的擴充性。
如果我們做一個元件，我們用哪個很多次，那麼此次他都一樣，，那麼這就寫的很死闆。
舉個例子
某東的導航欄：
是以這就是為什麼用插槽這個東西；
我們就可以寫一個插槽，即把不一樣 東西 寫在 插槽中 即可。
如何封裝合适呢？抽取共性，保留不同。
最好的封裝方式就是将共性抽取到元件中，将不同暴露為插槽。
一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什麼内容。
是搜尋框，還是文字，還是菜單。由調用者自己來決
slot基本使用
簡述：直接在模闆上的代碼 直接預留 用 <slot></slot> 這個标簽，就預留了一個插槽了，插槽中的代碼直接在 調用元件的時候 寫在元件其中。
<body>
<template id="cpn">
<div>
<h2>cpn-H2-标簽</h2>
<slot></slot> <!--此處預留插槽-->
</div>
</template>
<div id="app">
<cpn><button>插槽按鈕</button></cpn> <!--此處使用cpn元件 且 填補插槽-->
<cpn><i>插槽i标簽</i></cpn> <!--此處使用cpn元件 且 填補插槽-->
<cpn><span style="color: red">插槽span 紅色字型</span></cpn> <!--此處使用cpn元件 且 填補插槽-->
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'cpn':{
template:"#cpn",
}
}
})
</script>
</body> View Code
這就是插槽的基本使用。
但是有一個問題我們發現了：
如果我要用很多遍 插槽按鈕 這個元件，每次都要這樣寫嗎：
<div id="app">
<cpn><button>插槽按鈕</button></cpn>
<cpn><button>插槽按鈕</button></cpn>
<cpn><button>插槽按鈕</button></cpn>
<cpn><button>插槽按鈕</button></cpn>
<cpn><button>插槽按鈕</button></cpn>
······
<cpn><button>插槽按鈕</button></cpn>
</div> 那豈不是很麻煩，是以插槽也有預設值：
<body>
<template id="cpn">
<div>
<h2>cpn-H2-标簽</h2>
<slot><button>插槽按鈕 — 已在slot中定義預設</button></slot> <!--此處預留插槽 且 寫入插槽的預設值-->
</div>
</template>
<div id="app">
<cpn></cpn> <!--此處使用cpn元件 用的是插槽預設值（插槽按鈕） -->
<cpn><i>插槽i标簽</i></cpn> <!--此處使用cpn元件 且 填補插槽-->
<cpn><span style="color: red">插槽span 紅色字型</span></cpn>
<cpn></cpn> <!--此處使用cpn元件 用的是插槽預設值（插槽按鈕） -->
<cpn></cpn> <!--此處使用cpn元件 用的是插槽預設值（插槽按鈕） -->
<cpn></cpn> <!--此處使用cpn元件 用的是插槽預設值（插槽按鈕） -->
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'cpn':{
template:"#cpn",
}
}
})
</script>
</body> 是以 我如果要用很多遍 插槽按鈕，直接寫入預設值 ，然後我們就可以直接： <cpn></cpn> 這就是插槽的預設值。
如果不用元件的預設值，那麼你直接在使用元件的時候 在其中些代碼即可。
關于插槽還有一個特性：
當你填補插槽的時候 語句寫 很多很多，這些語句都會直接被填補進 一個 <slot></slot> ,這就是插槽的一個特點。
即：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
</head>
<body>
<template id="cpn">
<div>
<h2>cpn-H2-标簽</h2>
<slot></slot> <!--此處預留插槽 -->
<slot></slot> <!--此處預留插槽 -->
</div>
</template>
<div id="app">
<cpn>
<div>
<hr>
<h3>Hello World</h3>
<h3>Hello World</h3>
<hr>
</div>
</cpn>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'cpn':{
template:"#cpn",
}
}
})
</script>
</body>
</html> 運作結果：
可以看出 其實：