一、vue的插槽slot
在
vue
的開發當中，我們可能也經常會使用插槽
slot
，父元件給子元件傳遞
DOM
元素。插槽的實質，實際上是對于子元件的擴充，通過
slot
插槽向元件内部指定位置傳遞内容，也是承載内容分發的出口。在這裡，以預設插槽、具名插槽和作用域插槽進行總結說明。
二、vue的預設插槽
1. 預設插槽的說明：
預設插槽相當于是在子元件中寫明插槽的内容，當父元件在使用子元件的時候，同時父元件沒有指定插槽的内容時，那麼就使用子元件定義的預設插槽的内容。
2. 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>預設插槽</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
template: `<div>
<slot>預設内容</slot>
</div>`
})
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
三、vue的具名插槽
1. 具名插槽的說明：
具名插槽相當于是在子元件的插槽中給
slot
添加
name
屬性，進行命名，在父元件需要使用到插槽的地方，給
slot
添加之前的命名。這樣，可以實作向多個元件内部指定位置傳遞指定的内容。
2. 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>具名插槽</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<child>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</child>
</div>
<script>
Vue.component('child', {
template: `<div>
<slot name="header">預設内容</slot>
<div class="content">content</div>
<slot name="footer">預設内容</slot>
</div>`
});
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
四、vue的作用域插槽
1. 作用域插槽的說明：
作用域插槽相當于是子元件的
DOM
結構由外部傳遞過來，而使用作用域插槽，子元件可以向父元件傳遞資料，父元件以
template
模版，通過
slot-scope="props"
進行接收資料，
props.item
就是傳遞過來的資料。
2. 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue的作用域插槽</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<child>
<template slot-scope="props">
<h3>{{ props.item }}</h3>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function(){
return {
list: [21,22,24,43,29,2,33]
}
},
template: `<div>
<ul>
<slot v-for="item of list" :item=item></slot>
</ul>
</div>`
});
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)