vue组件化中slot的基本使用方法


Posted in Javascript onMay 01, 2019

前言

slot可以在子组件中开启插槽,在父组件引用该组建时,可以定义这个插槽内要展现的功能或模块,下面话不多说了,来一起看看详细的介绍吧

1.单个slot

子组件中在相应位置写slot标签,父组件在引用子组件时,在子组件标签内写要插入插槽的元素;

还可以设置slot在父组件没有设置插槽时,子组件的插槽默认显示内容;

父组件.vue

<template>
 <div class="home">
 <child-componment>
  <p>
  这是父组件的slot替代内容!
  </p>
 </child-componment>
 </div>
</template>
​
<script>
import childComponment from '@/components/childComponment.vue'
export default {
 name: "home",
 components:{
 childComponment
 },
 data(){
 return {
 message: ''
 }
 }
};
</script>

子组件childComponment.vue

<template>
 <div class="childComponment">
 <h2>这是子组件childComponment!</h2>
 <slot>
  <span style="color: red;">如果父组件没有插入内容,我这样可以设置默认的显示内容</span>
 </slot>
 </div>
</template>
​
<script>
export default {
 name: "childComponment",
 data(){
 return {
  message: ''
 }
 }
};
</script>

2.具名slot(同时使用多个插槽)

给slot指定一个名称,可以分发多个slot插槽,但是只能有一个无名slot;

父组件的slot插槽内容,不写slot="xxx"的都会插到子组件的无名slot中;

如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃。

<template>
 <div class="home">
 <child-componment>
  <h1 slot="header">
  父组件的header
  </h1>
  <h6 slot="footer">父组件的footer</h6>
  
  <h6>父组件的无名slot-1</h6>
  <p>
  父组件的无名slot-2
  </p>
 </child-componment>
 </div>
</template>
​
<script>
import childComponment from '@/components/childComponment.vue'
export default {
 name: "home",
 components:{
 childComponment
 },
 data(){
 return {
  message: ''
 }
 }
};
</script>

子组件

<template>
 <div class="childComponment">
 <span>这是子组件childComponment的正常内容!</span>
 <div class="header">
  <slot name="header">
  <span style="color: red;">子组件默认header-slot</span>
  </slot>
 </div>
 <div class="container">
  <!-- 如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃 -->
  <slot>
  <span style="color: red;">子组件默认无名slot</span>
  </slot>
 </div>
 <div class="footer">
  <slot name="footer">
  <span style="color: red;">子组件默认footer-slot</span>
  </slot>
 </div>
 </div>
</template>
​
<script>
export default {
 name: "childComponment",
 data(){
 return {
  message: ''
 }
 }
};
</script>
<style scoped>
.childComponment{
 font-size: 16px;
}
.header{
 height: 100px;
 border:1px solid red;
 color: red;
}
.container{
 height: 500px;
 border: 1px solid black;
 color: black;
}
.footer{
 height:100px;
 border: 1px grey solid;
 color: grey;
}
</style>

vue组件化中slot的基本使用方法

3.作用域插槽

<template>
 <div class="home">
 <child-componment>
  <template slot-scope="slotProps">
  <!-- 这里显示子组件传来的数据 -->
  <p>{{slotProps}}</p>
  </template>
 </child-componment>
 </div>
</template>
​
<script>
import childComponment from '@/components/childComponment.vue'
export default {
 name: "home",
 components:{
 childComponment
 }
};
</script>

子组件

<template>
 <div class="childComponment">
 <span>这是子组件childComponment的正常内容!</span>
 <div class="container">
  <!-- 如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃 -->
  <slot msg="子组件信息" slotData="子组件数据"></slot>
 </div>
 </div>
</template>

Tips:

作用于插槽也可是具名插槽

案例:列表组件

这是作用于插槽使用最多的案例,允许组件自定义应该如何渲染组件的每一项。

<template>
 <div class="about">
 <h1>This is about page</h1>
 <my-list :books="books">
 <template slot="bookList" slot-scope="myListProps">
  <li>{{myListProps.bookName}}</li>
 </template>
 </my-list>
 </div>
</template>
<script>
import myList from '@/components/myList.vue'
export default {
 components:{
 myList
 },
 data(){
 return {
  books: [
  {name: 'css揭秘'},
  {name: '深入浅出nodejs'},
  {name: 'javascript设计模式与开发实战'}
  ]
 }
 }
}
</script>

子组件myList.vue

<template>
 <div class="myList">
 <h1>This is myList page</h1>
 <ul>
 <slot name="bookList" v-for="book in books" :bookName="book.name"></slot>
 </ul>
 </div>
</template>
<script>
export default {
 props:{
 books:{
  type: Array,
  default: function(){
  return []
  }
 }
 },
 mounted(){
 console.log(this.books)
 }
}
</script>

其实上面的案例可直接在父组件中for循环就好,此处只是作为演示slot的作用域插槽;

实际开发中作用域插槽的使用场景主要为:既可以复用子组件的slot,又可以使slot内容不一致。

4.访问slot

vue2.0提供了$slot方法来访问slot

此处代码以**“具名slot(同时使用多个插槽)”**的代码为例,修改一下子组件childComponment.vue

export default {
 name: "childComponment",
 data(){
 return {
  message: ''
 }
 },
 mounted(){
 let header = this.$slots.header
 let main = this.$slots.default
 let footer = this.$slots.footer
 console.log(header)
 console.log(main)
 console.log(footer)
 console.log(footer[0].elm.innerHTML)
 }
};

打印结果:

vue组件化中slot的基本使用方法

其中elm的内容为插槽内容,结构如下:

vue组件化中slot的基本使用方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue基本使用之对象提供的属性功能
Apr 30 #Javascript
原生JS实现随机点名项目的实例代码
Apr 30 #Javascript
vue实现随机验证码功能的实例代码
Apr 30 #Javascript
详解vue 图片上传功能
Apr 30 #Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
You might like
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
php链式操作的实现方式分析
2019/08/12 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现把数字转换成中文
2015/06/29 Python
python数组过滤实现方法
2015/07/27 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
SQL面试题
2013/04/30 面试题
优秀医生事迹材料
2014/02/12 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL