一、插槽
插槽基础
默认的情况下，引入的组件，开始标签和结束标签之间不可以添加内容（如果添加了也会被忽略）。
插槽可以用来扩展组件的自定义能力，例如我们可以创建一个MyButton的自定义按钮，然后通过插槽来定义内部的文本。
1 <!-- MyButton.vue --> 2 <template> 3 <div> 4 <slot></slot> 5 </div> 6 </template> 7 <!-- app.vue --> 8 <template> 9 <my-button>测试文本</my-button> 10 </template>
具名插槽
有的时候一个组件会带有多个插槽，可以为slot标签添加name属性来区分不同的插槽，实例代码如下所示
1 <!-- Layout.vue --> 2 <template> 3 <div> 4 <header> 5 <slot name="header"></slot> 6 </header> 7 center 8 <footer> 9 <slot name="footer"></slot> 10 </footer> 11 </div> 12 </template>
引入组件后，可以通过template标签指定插槽的属性，实例代码如下所示。
1 <!-- app.vue --> 2 <template> 3 <layout> 4 <template v-slot:header> 5 this is header 6 </template> 7 <template v-slot:footer> 8 this is footer 9 </template> 10 </layout> 11 </template>
v-slot可以用#缩写，上面的代码可以缩写为
1 <layout> 2 <template #header> 3 this is header 4 </template> 5 <template #footer> 6 this is footer 7 </template> 8 </layout>
我们使用的很多Vue的第三方UI库多是使用插槽原理实现的，我们会在后面的课程中继续学习插槽在项目中的应用。
二、获取真实DOM
在此前的课程中，我们都是通过虚拟DOM实现的页面操作。在项目开发过程中，我们偶尔也会需要获取真实的DOM节点。
例如下面的例子，我们定义了一个空的div，然后在Vue中获取这个div的样式。
可以通过ref属性为元素添加引用信息，然后通过$refs来获这个元素。示例代码如下所示
1 <template>
2 <div class="content" ref="box">
3
4 </div>
5 </template>
6
7 <script>
8 export default {
9 //window.getComputedStyle方法可以获取元素的样式。
10 mounted(){
11 console.log(window.getComputedStyle(this.$refs.box).height)
12 }
13 }
14 </script>
15
16 <style scoped>
17 .content{
18 border:1px solid red;
19 width:100px;
20 height:100px;
21 }
22 </style>
三、过滤器
1 <template>
2 <div>
3 <h1>{{date | dateForma}}</h1>
4 </div>
5 </template>
6 export default {
7 data(){
8 return {
9 date:"2020-1-1"
10 }
11 },
12 filters:{
13 dateForma(value){
14 let dateTime = new Date(value);
15 let year = dateTime.getFullYear();
16 let month = dateTime.getMonth();
17 let date = dateTime.getDate();
18 return `${year}年${month+1}月${date}日`
19 }
20 }
21 }
四、课后练习
- 使用插槽自定义表格组件，让组件可以展示列表内容。
- 当浏览器滚动到底部时，获取更多数据。
- 编写一个过滤器，将阿拉伯数字转换成汉子的数字。