Web前端学习 第7章 Vue基础教程7 插槽、DOM操作、过
一、插槽
插槽基础
默认的情况下，引入的组件，开始标签和结束标签之间不可以添加内容（如果添加了也会被忽略）。
插槽可以用来扩展组件的自定义能力，例如我们可以创建一个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 }四、课后练习
- 使用插槽自定义表格组件，让组件可以展示列表内容。
- 当浏览器滚动到底部时，获取更多数据。
- 编写一个过滤器，将阿拉伯数字转换成汉子的数字。
举报
腾讯云开发者
