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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
使用原生js编写一个简单的框选功能方法
May 13 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
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP文件操作详解
2016/12/30 PHP
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
layui表格数据重载
2019/07/27 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python发送邮件功能实现代码
2016/07/15 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
社会实践自我鉴定
2013/11/07 职场文书
颐和园导游词
2015/01/30 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
2015年统战工作总结
2015/05/19 职场文书
答辩状格式范本
2015/05/22 职场文书
军训决心书范文
2015/09/22 职场文书
市级三好生竞选稿
2015/11/21 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL