Vue 插槽
插槽的类型
默认插槽 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>
