首页
所有分类
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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
js select实现省市区联动选择
Apr 17 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
Oct 26 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
HBuilder(1) 分布式追踪(1) 条形码(1) Express(1) Three.js(1) MutationObserver(1) tree shaking(1) kubernetes(1) group by(1) GPU(1)
You might like
消息持续发送的完整例子
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
简单实现PHP留言板功能
2016/12/21 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
python实现的防DDoS脚本
2011/02/08 Python
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python语言进阶知识点总结
2019/05/28 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Unineed旗下时尚轻奢网站：FABHunt
2019/05/13 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
会计自荐信范文
2014/03/09 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
计划生育责任书
2015/05/09 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
读书笔记怎么写
2015/07/01 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
爱岗敬业先进典型事迹材料（2016推荐版）
2016/02/26 职场文书
2019年幼儿园管理条例范本！
2019/07/17 职场文书