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调用activeX获取u盘序列号的代码
Nov 21 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
vue如何从接口请求数据
Jun 22 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
validform表单验证的实现方法
Mar 08 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
学生自我鉴定范文
2013/10/04 职场文书
会计实习期自我鉴定
2013/10/06 职场文书
项目开发计划书
2014/01/09 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
促销活动计划书
2014/05/02 职场文书
学校三节实施方案
2014/06/09 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
入党转正申请书范文
2019/05/20 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android