目录
1. slot-插槽的基本使用
1.1什么是插槽？
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
1.2默认插槽
<body>
<div id="app">
<cpn>
<h2 style="color: red;">我们在学习插槽</h2>
</cpn>
</div>
<!-- 子组件写插槽 -->
<template id="cpn">
<div class="cpn">
<h2>{{msg}}</h2>
<!-- <slot>我是默认插槽</slot>
插槽就是在子组件里放入插槽，在父组件中可以给子组件进行相关操作，如果没有插槽，可见父组件中往子组件添加类容，不会有效，但是加了插槽，就可以生效。
装上插槽slot就会生效
2.具名插槽:(有名字的插槽)
v-slot一般跟template标签使用
具名插槽使用name定义名字，在使用插槽者那里接收需要slot=‘name具体化名字’
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn>
<span>111222333</span>
<span slot="left">这是左边具名插槽</span><!-- U盘 -->
<span slot="center">这是中间具名插槽</span>
<span slot="right">这是右边具名插槽</span>
</cpn>
</div>
<template id="cpn">
<div class="cpn">
<h2>{{msg}}</h2>
<slot name="center"></slot><!-- 电脑插口 -->
<slot name="left"></slot>
<slot name="right"></slot>
<slot>没有具名的插槽</slot>
</div>
</template>
<script>
const cpn = {
template: '#cpn',
data() {
return {
msg: '我们晚上也在上课 很努力'
}
}
}
const vm = new Vue({
el: '#app',
data() {
return {}
},
components: {
cpn
}
})
</script>
</body>
</html>
文字的内容位置，是根据插槽的位置决定的，插槽就相当于电脑里的usb接口，在父组件中去接收就相当于优盘插入插槽，一一对应。
3.作用域插槽:
组件内变量绑定在slot上, 然后使用组件v-slot:插槽名字="变量" ，变量上就会绑定slot传递的属性和值
什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染
3.1接收作用域插槽几种写法：
<!-- <span slot-scope="list">被废弃
</span> -->
<!-- <template v-slot:default="list" >
<span>{{left}}</span>
</template> -->
<!-- <template #default="list" >
<span>{{left}}</span>
</template> -->3.2完整代码
（父组件app）
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<my-header>
<template #default='list'>
<ul>
<li v-for="(item,index) in list.moves" :key="index">{{item}}</li>
</ul>
</template>
</my-header>
<my-header>
<template slot-scope="list">
<ol>
<li v-for="(item,index) in list.moves" :key="index">{{item}}</li>
</ol>
</template>
</my-header>
<my-header>
<template v-slot:default="list">
<h3 v-for="(item,index) in list.moves" :key="index">{{item}}</h3>
</template>
</my-header>
<!-- <span slot-scope="list">被废弃
</span> -->
<!-- <template v-slot:default="list" >
<span>{{left}}</span>
</template> -->
<!-- <template #default="list" >
<span>{{left}}</span>
</template> -->
</div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
export default {
name: "App",
components: {
MyHeader,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
justify-content: space-around;
}
</style>（子组件中）
<template>
<div class="header">
<h2>{{msg}}</h2>
<!-- <ul>
<li v-for="(item, index) in moves" :key="index">{{item.name}}</li>
</ul> -->
<slot :moves='moves'>我是默认内容</slot>
</div>
</template>
<script>
export default {
name: "MyHeader",
data() {
return {
moves: [
'金榜','热榜','人气榜'
],
msg:'歌曲排行'
};
},
};
</script>
<style scoped>
div {
color: red;
}
.header{background-color: bisque;
width: 200px;
height: 300px;
text-align: center;}
</style>效果：（使用相同的数据，不同的结构类型，通过作用域插槽实现父子组件通讯，父组件使用子组件数据，对子组件进行修改）