vue template中slot-scope/scope的使用方法


Posted in Javascript onSeptember 06, 2018

在vue 2.5.0+ 中slot-scope替代了 scope

template 的使用情形为,我们已经封装好一个组建,预留了插槽,使用 的插槽

首先 我们的创建一个组建

组建很简单有一个 slot,slot有两个属性 a=123,b=msg

<template>
 <div>
  <div>下面是一个slot</div>
  <slot a="123" b="msg" ></slot>
 </div>
</template>

接下来我们引入组建,并使用组建,引入的组建名 为mysolt,并使用组建

然后使用 template ,并使用scope/slot-scope,

<div>
 <mysolt>
   <template scope="msg">
    <div>下面是solt的props 调用</div>
    <div>{{msg}}</div>
    <div>{{msg.a}}</div>
    <div>{{msg.b}}</div>
   </template>
 </mysolt>
</div>

渲染图如下:

vue template中slot-scope/scope的使用方法

其实就是 template 通过scope/slot-scope 属性 调用组建 slot 的属性,以达到可以调用组建属性实现复杂的嵌套;

实例中 我使用 msg 来重命名 slot 的属性对象,即 msg 为slot 的{a:'123',b:'msg'}, 就可以通过使用msg 在template 中使用slot的属性

(注意:当前层 如果有data已经声明过 msg,它们之间互不干扰,template 的msg 以slot 的为准)

如果我给当前 data的msg={c:111},效果图如下:

<div>{{msg.c}}</div>

 <mysolt>
  <template scope="msg">
   <div>下面是solt的msg</div>
   <div>{{msg}}</div>
   <div>{{msg.a}}</div>
   <div>{{msg.b}}</div>
   <div>{{msg.c}}</div>
  </template>
 </mysolt>

vue template中slot-scope/scope的使用方法

以上这篇vue template中slot-scope/scope的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
webpack4简单入门实例
Sep 06 #Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 #Javascript
You might like
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php防止sql注入代码实例
2013/12/18 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
js href的用法
2010/05/13 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python实现求数列和的方法示例
2018/01/12 Python
python文件操作的简单方法总结
2019/11/07 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
Linux常见面试题
2013/03/18 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
小学生获奖感言范文
2014/02/02 职场文书
学生手册家长评语
2014/02/10 职场文书
五五普法心得体会
2014/09/04 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
个人承诺书格式范文
2015/04/29 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang