一丶插槽slot
(一)slot翻译为插槽
- 插槽的目的是让我们原来的设备具有更多的扩展性
- 比如电脑的USB插槽,可以插入U盘,键盘,鼠标等
(二)组件的插槽
- 组件的插槽也是为封装的组件更具有扩展性
- 组件内部的展示什么,由外界来决定
插槽即预留的空间。一般定义可复用性组件时,使用插槽
二丶插槽基本使用
- 代码
<!--作者:ikunsdc-->
<!--开发时间:2021/03/11 00:08-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.插槽的基本使用,<slot></slot>-->
<!--2.插槽的默认值 <slot>button</slot>-->
<!--3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素-->
<div id="app">
<cpn><button>按钮</button></cpn>
<cpn>
<i>呵呵呵</i>
<div>我是DIV元素</div>
<p>我是段落</p>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是key</h2>
<p>我是内容</p>
<slot></slot>
<hr>
</div>
</template>
<template id="cpn2">
<slot></slot>
<hr>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
</body>
</html>
- 运行
三丶具名插槽的使用
当组件中由多个插槽时,给每个插槽命名,调用时指定替换哪个插槽
- 代码
<!--作者:ikunsdc-->
<!--开发时间:2021/03/11 00:08-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn>
</cpn>
<hr>
<cpn>
<!-- 替换时,根据名字,指定替换某个插槽-->
<span slot="center">标题</span>
<span slot="left">返回</span>
<span slot="right">更多</span>
</cpn>
</div>
<template id="cpn">
<div>
<!-- 给slot取名, slot中间均是默认值-->
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn:{
template:'#cpn'
}
}
})
</script>
</body>
</html>
- 运行
—— Git ——