二十二、插槽（slot）
组件的插槽
- 组件的插槽时为了让我们封装的组件更加具有扩展性
- 让使用者可以决定组件内部的一些内容到底展示什么
■如何去封装这类的组件
- 它们也很多区别,但是也有很多共性。
- 如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
- 但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字等等。
■如何封装合适，抽取共性,保留不同。
- 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
- 是搜索框,还是文字,还是菜单。由调用者自己来决定。
1. 插槽的基本使用：<slot></slot>
2. 插槽的默认值：<slot>button<slot>
3. 如果有多个值，同时放入到组件进行替换时，一起作为替换元素
<!--
1.插槽的基本使用：<slot></slot>
2.插槽的默认值：<slot>button<slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app">
<my_con><button>按钮</button></my_con>
<my_con><span>哈哈哈</span></my_con>
<my_con>
<i>呵呵呵</i>
<div>我是div元素</div>
<p>我是p元素</p>
</my_con>
<my_con></my_con>
<my_con></my_con>
</div>
<template id="cpnC">
<div>
<p>我是组件<i>我是组件，哈哈哈</i></p>
<!-- 预备插槽 -->
<slot><button>按钮</button></slot>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hellow World"
},
components:{
my_con: {
template: "#cpnC"
},
}
});
</script>
具名插槽
使用name属性对插槽进行定义，并使用 slot="" ，对指定的插槽进行调用
<div id="app">
<my_cpn>
<div slot="center">
<span>标题</span>
</div>
<div slot="left">
<button>按钮</button>
</div>
</my_cpn>
</div>
<template id="cpnC">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hellow World"
},
components:{
my_cpn:{
template: "#cpnC"
}
}
});
</script>
作用域插槽（父组件替换插槽的标签，但是内容由子组件来提供）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<!-- 父组件替换插槽的标签，但是内容由子组件来提供 -->
<div id="app">
<my_cpn></my_cpn>
<my_cpn>
<!-- <span>JavaScript-</span>
<span>c++-</span> -->
<!-- 目的是获取子组件中的pLanguages -->
<template slot-scope="slot">
<span>
{{ slot.data.join(" - ") }}
</span>
<!-- <span v-for="item in slot.data">{{item}}- </span> -->
</template>
</my_cpn>
<my_cpn>
<!-- <span>JavaScript-</span>
<span>c++-</span> -->
<!-- 目的是获取子组件中的pLanguages -->
<template slot-scope="obj">
<span v-for="item in obj.data">{{item}}* </span>
</template>
</my_cpn>
</div>
<template id="cpnC">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages"> {{ item }} </li>
</ul>
</slot>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hellow World"
},
components: {
my_cpn: {
template: "#cpnC",
data(){
return {
pLanguages: ["JavaScript","C++","Java","c#","Python","go","swift"],
}
}
}
}
});
</script>
</body>
</html>
