Vue - 具名插槽和作用域插槽
2019-11-04 本文已影响0人
ElricTang
slot（插槽）可以理解为占位符
一. 具名插槽（使用新的v-slot语法）
- 直接看使用的例子：
<body>
<div id='app'>
<base-layout>
<template v-slot:header>
<h1>标题</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>结尾</p>
</template>
</base-layout>
</div>
<script>
var baseLayout = {
template:`<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>`
}
var vm = new Vue({
el:'#app',
components:{
'base-layout':baseLayout
}
})
</script>
</body>
注意点：
1. 子组件模板内使用<slot name="header"></slot>设置一个占位的插槽
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
2. 父组件内使用<template v-slot:header></template>替换占位内容
<base-layout>
<template v-slot:header>
<h1>标题</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>结尾</p>
</template>
</base-layout>
二. 作用域插槽（使用2,6.0新语法，slot-scope已废弃）
- 主要作用：如果想在父组件使用子组件的同时还想访问子组件的数据，除了使用$emit的方法外，作用域插槽也提供了一种解决办法。
- 直接看例子：
<body>
<div id='app'>
<child>
<template v-slot:header="slotProps">
<p>{{slotProps.title}}</p>
<p>{{slotProps.summary}}</p>
</template>
</child>
</div>
<script>
var child = {
template:`<div>
<header>
<slot name="header" :title="title" :summary="summary"></slot>
</header>
</div>`,
data(){
return {
title:'hello world',
summary:'学习作用域插槽'
}
}
}
var vm = new Vue({
el:'#app',
components:{
child
}
})
</script>
</body>
效果
注意点
- 不使用作用域插槽的话，父组件使用子组件时无法直接获取子组件的数据（作用域问题）
- 子组件的template中使用
v-bind的方式绑定数据到slot上，<slot name="header" :title="title" :summary="summary"></slot>，这里把title和summary绑定到header插槽上。 - 绑定的数据被收集到slotProps上，通过slotProps就可以访问子组件的数据了
解析
