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无缝滚动代码
Jan 03 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
Vue计算属性的使用
Aug 04 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 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 文章采集正则代码
2009/12/28 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python深入学习之闭包
2014/08/31 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
css3的transition属性详解
2014/12/15 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
中软Java笔试题
2012/11/11 面试题
出国留学计划书
2014/04/27 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
聘任书的格式及模板
2019/10/28 职场文书