什么是具名插槽
当子组件需要使用多个插槽时，可以利用slot元素的name属性来定义具名插槽，方便父组件使用时辨识，具体看看怎么使用大家就知道啦。
具名插槽的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn><span>标题</span></cpn><br>
<cpn>
<span slot="left">导航占用左边的位置</span>
<span slot="center">标题占用中间的位置</<span>
</cpn>
<br />
<cpn><span slot="left">修改左边的占位</span></cpn>
<br />
<cpn><button slot="right">修改右边占位</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
cpn: {
template: "#cpn",
},
},
})
</script>
</body>
</html>
- 此时子组件已经定义了具保插槽，如果父组件使用时没有带上slot属性，则默认无法覆盖子组件的插槽，此时相当于父组件没有使用插槽功能，所以子组件显示默认数据。如图所示：
<cpn><span>标题</span></cpn>
- 如果父组件使用时定义了slot属性绑定了子组件中的name属性，则两属性一一对应，即可实现目标替换。如图所示：
<cpn>
<span slot="left">导航占用左边的位置</span>
<span slot="center">标题占用中间的位置</<span>
</cpn>
<cpn><span slot="left">修改左边的占位</span></cpn>
具名插槽的应用场景
比如我们在做一个导航栏组件时，分为左中右三部分，且想到独立，不受影响，即可使用具名插槽。
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。