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 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
jquery 选取方法都有哪些
May 18 Javascript
给js文件传参数(详解)
Jul 13 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
关于php中一些字符串总结
2016/05/05 PHP
php cookie 详解使用实例
2016/11/03 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
详解python中的hashlib模块的使用
2019/04/22 Python
django admin组件使用方法详解
2019/07/19 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
新闻学专业个人求职信写作
2014/02/04 职场文书
销售经理岗位职责
2014/03/16 职场文书
文案策划求职信
2014/04/14 职场文书
初婚未育证明样本
2014/10/24 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers