1. 插槽 : 替換內容 / 分發內容
（1）占位，像出口<router-view></router-view>。
（2）沒有新的內容放進來，就用默認的。
（3）<slot></slot>將被替換成組件內的對應子節點。
2. 基本使用
<el-car>
<div>寶馬發動機</div>
</el-car>
組件的內部
<slot></slot>
~
02-插槽的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
需求1: 僅僅是改文字
大眾發動機 => 奧迪發動機
需求2 : 文字 + 標簽
<div>大眾發動機</div> => <p>奧迪發動機</p>
插槽 : 替換內容 / 分發內容 【占位，沒有新的內容放進來，就用默認的。】
-->
<div id="app">
<!-- 第一次使用 -->
<el-car>
<div>大眾發動機</div>
</el-car>
<!-- 第二次使用 -->
<el-car>
<p>奧迪發動機</p>
</el-car>
<!-- 第三次使用 -->
<el-car></el-car>
</div>
<template id="tpl">
<div>
<h3>提示</h3>
<!-- slot 可以給默認的內容，也可以不給，不給就沒內容，就不顯示 -->
<slot>
<p>國產雅迪迪</p>
</slot>
<button>取消</button>
<button>確定</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 注冊組件
Vue.component('el-car', {
template: `#tpl`
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
3. 具名插槽
<h3 slot='n1'>提示</h3>
<p slot='n2'>奧迪發動機</p>
組件的內部
03-插槽的具名.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
具名 : 給插槽加個名字
【場景：有2個以上的插槽，視情況替換某個/些插槽。】
需求3 : 把 提示 和 大眾發動機 都要給替換掉
-->
<div id="app">
<!-- 第一次使用 -->
<el-car>
<!-- 這里，slot屬性給普通標簽添加，不是給組件標簽添加 -->
<h3 slot="n1">大眾提示</h3>
<div slot="n2">大眾發動機</div>
</el-car>
<!-- 第二次使用 -->
<el-car>
<h3 slot="n1">奧迪提示</h3>
<p slot="n2">奧迪發動機</p>
</el-car>
</div>
<template id="tpl">
<div>
<!-- 這里，具名插槽，加上name屬性。 -->
<slot name='n1'></slot>
<slot name='n2'></slot>
<button>取消</button>
<button>確定</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 注冊組件
Vue.component('el-car', {
template: `#tpl`
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
~
04-模擬一個el-input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<el-input>
<!-- append：就會去替換 -->
<span slot="append">搜索</span>
</el-input>
</div>
<template id="tpl">
<div>
<slot name='prepend'></slot>
<input />
<slot name='append'></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 組件
Vue.component('el-input', {
template: `#tpl`
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
~
4. 作用域插槽
組件的子節點想訪問組件內部的數據
<el-car>
<!--
<p slot-scope='scope'>發動機樣式 : {{ scope.type }} {{ scope.num }} {{ scope.row.id }}</p>
-->
<!-- 都是套一個template -->
<template slot-scope='scope'>
<p>發動機樣式 {{ scope.type }} {{ scope.row.id }}</p>
</template>
</el-car>
- 組件內部
<slot :type='type' num='123'></slot>
data(){
return {
type: 'EA888',
row: {
id: 500
username: 'admin'
}
}
}
~
05-作用域插槽.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
作用域插槽 : 獲取值
> 子節點 p 想訪問 組件內部的數據 type 無法訪問
> 因為組件封閉獨立的個體
-->
<div id="app">
<el-car>
<!-- 凡是 slot 里面的屬性 都將作為 scope 的屬性存在 -->
<!-- 注意，插槽的name屬性不能作為 scope 的屬性 -->
<!-- 這是 vue 2.5.0 之前的寫法 -->
<p slot-scope="scope">
發動機樣式 {{ scope.row.id }} - {{ scope.row.username }} - {{ scope.num }} - {{ scope.type }}
</p>
<!-- vue 2.5.0 之后， slot-scope 要寫在 template 里面了 -->
<!--
<template slot-scope="scope">
<p>發動機樣式: {{ scope.type }}</p>
<p>發動機id: {{ scope.row.id }}</p>
<p>用戶名 : {{ scope.row.username }}</p>
</template>
-->
</el-car>
</div>
<template id="tpl">
<div>
<h3>提示</h3>
<!-- 注意，插槽的name屬性不能作為 scope 的屬性 -->
<slot :type='type' num='1234' :row='row'></slot>
<button>取消</button>
<button>確定</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 組件
Vue.component('el-car', {
template: `#tpl`,
data() {
return {
type: 'EA888',
row: {
id: 500,
username: 'admin'
}
}
}
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
~