首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

阿喵~~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
vue中使用codemirror的实例详解
Nov 01 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
解决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
西班牙购物网站(115) 埃及购物网站(2) 马来西亚购物网站(41) 瑞士购物网站(28) 俄罗斯购物网站(137) 德国购物网站(227) 日本购物网站(72) 墨西哥购物网站(16) 印度购物网站(45) 印尼购物网站(37)
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
百度地图api如何使用
2015/08/03 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python File(文件) 方法整理
2019/02/18 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
市场开发与营销专业求职信
2013/12/31 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
员工手册董事长致辞
2015/07/29 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Django REST framework 限流功能的使用
2021/06/24 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技