Vue插槽_特殊特性slot,slot-scope与指令v-slot说明


Posted in Javascript onSeptember 04, 2020

1、slot作用/概念:预先将将来要使用的内容进行保留;

2、具名插槽:给slot起个名字

3、slot、slot-scope已经被废弃推荐使用vue2.6.0中的v-slot;但是这边还是对新旧方法对做一下使用说明。

slot插槽(不具名)

<body>
 <div id="app">
  <Test>
   <div>slot插槽占位内容</div>
  </Test>
 </div>
 <template id="test">
  <div>
   <slot></slot>//定义插槽
   <h3>这里是test组件</h3>
  </div>
 </template> 
</body>

<script>
 Vue.component('Test',{
  template:"#test"
 });

 new Vue({
  el:"#app",
 })
</script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

slot具名插槽使用

在组件中使用slot进行占位时,在slot标签内使用name 属性给slot插槽定义一个名字,就是具名插槽。在html中使用具名插槽时,使用slot引入

<body>
 <div id="app">
  <Test>
   <div slot="header">这里是头部</div>//具名插槽使用
   <div slot="footer">这里是尾部</div>
  </Test>
 </div>
 <template id="test">
  <div>
   <slot name="header"></slot>//具名插槽
   <h3>这里是Test组件</h3>
   <slot name="footer"></slot>
  </div>

 </template>
</body>
<script>
 Vue.component(
  'Test',{
   template:"#test"
 });
 new Vue({
  el:"#app"
 })
</script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

v-slot使用

v-slot在组件中使用slot进行占位时,也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签,template标签内,使用v-slot指令绑定插槽名,标签内写入需要添加的内容

<body>
 <div id="app">
  <Test>
   <template v-slot:header>//v-slot指令使用插槽
   <h2>slot头部内容</h2>
   </template>
   
   <p>直接插入组件的内容</p>
   
   <template v-slot:footer>
   <h2>slot尾部内容</h2>
   </template>
  </Test>
 </div>
 
 <template id ='test'>
  <div class="container">
   <header>
   <!-- 我们希望把页头放这里 -->
   <slot name = "header"></slot>//具名插槽
   </header>
   <section>
   主体内容部分
   </section>
   <footer>
   <!-- 我们希望把页脚放这里 -->
   <slot name = 'footer'></slot>
   </footer>
  </div>
 </template> 
</body>

<script>
 Vue.component('Test',{
  template:"#test"
 });
 new Vue({
  el:"#app"
 })
</script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

作用域插槽:

slot-scope使用:

a、:在组件模板中书写所需slot插槽,并将当前组件的数据通过v-bind绑定在slot标签上。

b、:在组件使用时,通过slot-scope=“gain”,接收组件中slot标签上绑定的数据。

c、:通过gain.xxx就可以使用绑定数据了

<body>
 <div id="app">
  <Test>
   <div slot="default" slot-scope="gain">//作用域插槽的用法(slot-scope)
   {{ gain.msg }}
   </div>
   
  </Test>
 </div>

 <template id="test">
  <div>
   <slot name="default" :msg="msg"> </slot>
   <p>这里是test组件</p>
  </div>
 </template>
</body>
<script>
 new Vue({
  el:"#app",
  components:{
   'Test':{
   template:"#test",
   data(){
    return {
     msg:"你好"
    }
   },
   }
  }
 })
</script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

作用域插槽:v-slot的用法

<body>
 
 <div id="app">
  <Test>
   <template v-slot:header="gain">//v-slot定义作用域插槽
   <div>
     <h3>slot</h3>
     <p> {{gain.msg}} </p>
   </div>
   </template>
   
  </Test>
 </div>
 
 <template id="test">
  <div>
   <slot name="header":msg="msg"></slot>
   <p>这里是test组件</p>
  </div>
 </template>
 
</body>
<script>
 Vue.component('Test',{
  template:"#test",
  data(){
   return {
   msg:'这里是头部'
   }
  }
 });

 new Vue({

 }).$mount("#app")
</script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope,但是从上述案例可以看出,v-slot在使用时,需要在template标签内,这点大家要注意。

补充知识:vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别

不具名插槽

子组件:

<template>
 <div>
 <!--定义不具名插槽 -->
 <slot></slot>
 <h3>这里是不具名插槽组件</h3>
 </div>
</template>
 
<script>
export default {
 data() {
 return {}
 },
 created() {},
 mounted() {},
 methods: {}
}
</script>
<style lang="scss" scoped></style>

在父组件中使用:

<template>
 <div id="inforCategory-warp">
 <!-- 不具名插槽 -->
 <lxsolt>不具名插槽</lxsolt>
 
 </div>
</template>
 
<script>
import lxsolt from './lx'
export default {
 name: 'inforCategory',
 components: {
 lxsolt,
 },
 data(){
 return{}
 }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>

作用域插槽:

slot-scope使用(slot-scope绑定的是子组件的数据):

在组件模板中书写所需slot插槽,并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时,通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

具名插槽以及作用域插槽

子组件:

<template>
 <div>
 <slot name="header" :msg="name"></slot>
 <h3>这里是具名插槽组件</h3>
 <slot name="footer"></slot>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  name:'具名插槽组件'
 }
 },
 created() {},
 mounted() {},
 methods: {}
}
</script>
<style lang="scss" scoped></style>

父组件:

<template>
 <div id="inforCategory-warp">
  <!-- 具名插槽 -->
 <nameSlot>
  <div slot="header" slot-scope="scope">这里是slot-scope<span style="color:red">{{scope.msg}}</span>头部</div>
  <div slot="footer">这里是尾部</div>
 </nameSlot>
 
 </div>
</template>
 
<script>
import nameSlot from './nameSlot'
export default {
 name: 'inforCategory',
 components: {
 nameSlot,
 },
 data(){
 return{
  msg:'具名插槽信息',
  msg2:'v-slot'
 }
 }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>

v-slot以及作用域插槽

子组件:

<template>
 <div>
 <div class="container">
  <header>
  <!-- 我们希望把页头放这里 -->
  <slot name="header"></slot>
  </header>
  <section>
  v-slot组件
  </section>
  <footer>
  <!-- 我们希望把页脚放这里 -->
  <slot name="footer" :msg="msg"></slot>
  </footer>
 </div>
 </div>
</template>
 
<script>
export default {
 data() {
 return {
  msg:'vsolt作用域插槽组件'
 }
 },
 created() {},
 mounted() {},
 methods: {}
}
</script>
<style lang="scss" scoped></style>

父组件:

<template>
 <div id="inforCategory-warp">
 <vsolt>
  <template v-slot:header>
  <h2>slot头部内容</h2>
  </template>
 
  <p>直接插入组件的内容</p>
 
  <template v-slot:footer="scope">
  <h2>slot尾部内容<span style="color:red">{{scope.msg}}</span></h2>
  </template>
 </vsolt>
 
 </div>
</template>
 
<script>
import vsolt from './v-slot'
export default {
 name: 'inforCategory',
 components: {
 vsolt,
 },
 data(){
 return{
  msg:'具名插槽信息',
  msg2:'v-slot'
 }
 }
}
</script>
<style lang="scss" scoped>
#inforCategory-warp {
}
</style>

以上这篇Vue插槽_特殊特性slot,slot-scope与指令v-slot说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
js监听html页面的上下滚动事件方法
Sep 11 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 #Javascript
You might like
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Python类的专用方法实例分析
2015/01/09 Python
python遍历目录的方法小结
2016/04/28 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python with标签使用方法解析
2020/01/17 Python
jupyter实现重新加载模块
2020/04/16 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
印度购物网站:TATA CLiQ
2017/11/23 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
高中自我鉴定范文
2013/11/03 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
营销与策划实训报告
2014/11/05 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
法律服务所工作总结
2015/08/10 职场文书