一、插槽
插槽基础
默认的情况下，引入的组件，开始标签和结束标签之间不可以添加内容（如果添加了也会被忽略）。
插槽可以用来扩展组件的自定义能力，例如我们可以创建一个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 header4</template>5<template #footer>6 this is footer7</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> 8export default { 9//window.getComputedStyle方法可以获取元素的样式。10 mounted(){11 console.log(window.getComputedStyle(this.$refs.box).height)12 }13}14</script>1516<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>
6export 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}
四、课后练习
使用插槽自定义表格组件，让组件可以展示列表内容。
当浏览器滚动到底部时，获取更多数据。
编写一个过滤器，将阿拉伯数字转换成汉子的数字。
网友评论