Vue 插槽
阿新 • • 發佈：2020-07-31
插槽的型別
預設插槽 default
具名插槽 name
作用域插槽 v-slot
預設插槽的使用
在自定義元件中使用<slot />標籤進行佔位，當我們使用該元件時，在元件標籤內寫入需要展示的具體內容：
{
components: {
'MyConponent': {
template: '<div><slot /></div>'
}
}
}
<my-conponent>這裡是要顯示的插槽內容！</my-conponent>
示例
<!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>Document</title> </head> <body> <div id="app"> <my-component> 句號 </my-component> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> // Vue.Component 註冊了全域性元件 myComponent，並在元件內部使用了預設插槽 slot Vue.component('myComponent', { template: '<div>Hello ！<slot></slot></div>' }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
具名插槽的使用
具名插槽就是給<slot />標籤加上 name 屬性。語法：<my-component><slot name="插槽名字"/></my-component>
{ components: { 'MyConponent': { template: '<div><slot name="hello"/></div>' } } } <my-conponent> <template slot="hello"></template> </my-conponent>
示例：
<!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>Document</title> </head> <body> <div id="app"> <my-component> <span slot="name">句號</span> <span slot="time">2020-02-02</span> </my-component> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('myComponent', { template: '<div>Hello ！<slot name="name"></slot> <slot name="time"></slot></div>' }) var vm = new Vue({ el: '#app', data() { return {} } }) </script> </html>
作用域插槽的使用
有時候，我們在父元件使用插槽時需要訪問子元件中的資料，這時候就需要使用作用域插槽。用法：將 data 變數名 作為 <slot> 元素的一個 attribute 繫結上去：
<slot :[自定義變數名]="[需要傳入的資料]"></slot>
<!-- 示例 -->
<slot :count="count"></slot>
```，
在使用元件時，通過`v-slot:插槽名字="資料別名"`的方式使用。
```html
<!-- 預設插槽中使用作用域插槽 -->
<my-component>
<template v-slot:default="slotProps">
{{slotProps.count}}
</template>
</my-component>
<!-- 具名插槽中使用作用域插槽 -->
<my-component>
<template v-slot:插槽名字="slotProps">
{{slotProps.count}}
</template>
</my-component>
預設插槽中使用作用域插槽
對於預設插槽我們可以省略v-slot後面的插槽名，直接使用v-slot="資料別名"的方式：
示例：
<!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>Document</title>
</head>
<body>
<div id="app">
<my-component>
<!-- 使用 v-slot 接收預設插槽的資料，並把資料命名為 slotProps-->
<template v-slot:default="slotProps">
<br />
<!-- 使用 插槽資料-->
我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
</template>
</my-component>
<my-component>
<!-- 預設插槽可以忽略v-slot後面的插槽名-->
<template v-slot="slotProps">
<br />
<!-- 使用 插槽資料-->
我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
</template>
</my-component>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myComponent', {
// 在預設插槽中傳入資料 detail
template: '<div>Hello ！<slot :detail="detail"></slot></div>',
data() {
return {
detail: {
name: '句號',
love: 'coding'
}
}
}
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>
具名插槽中使用作用域插槽
具名插槽必須在v-slot後面加上插槽名，否則資料無法在具名插槽中使用：
示例：
<!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>Document</title>
</head>
<body>
<div id="app">
<my-component>
<!-- 使用 v-slot 接收具名插槽 detail 的資料，並把它命名為 slotProps-->
<template v-slot:detail="slotProps">
<br />
<!-- 使用 插槽 detail 的資料-->
我叫：{{slotProps.detail.name}}，我的愛好是：{{slotProps.detail.love}}
</template>
</my-component>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myComponent', {
// 定義具名插槽 detail 並傳入資料 detail
template: '<div>Hello ！<slot :detail="detail" name="detail"></slot></div>',
data() {
return {
detail: {
name: '句號',
love: 'coding'
}
}
}
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>