v-slot和slot、slot-scope之间相互替换实例


Posted in Javascript onSeptember 04, 2020

如果组件文档里面用的是v-slot,而你用的是vue2.6之前的版本,则需要替换v-slot:所以有两种替换方式,注意看两块v-slot有啥不同,你就知道你该怎么用slot-scope和slot来替换文档中的v-slot了

v-slot使用方式1:

<template v-slot:operate="{ row }"><template>

则可替换为:

<template slot="operate" slot-scope="{ row }"></template>

v-slot使用方式2:

<template v-slot="{ row }"><template>

则可替换为:

<template slot-scope="row"></template>

先记录后期再完善,赶项目去了

补充知识:V-for and slot-scoped报错问题

此场景是为了用v-for动态渲染表格的slot

可能会这么写

<a-table>
 <span v-for="(item, index) in header" :key="index" :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
</a-table>

但是这样子会报错,因为v-for和slot-scope在同一级

Ambiguous combined usage of slot-scope and v-for on (v-for takes higher priority). Use a wrapper < template> for the scoped slot to make it clearer.

提示在外边包一层< template>,于是你可能改成下面这样,但是也会报错

<a-table>
 <template v-for="(item, index) in header" :key="index">
 <span :slot="item.dataIndex" slot-scope="text" >
  {{ text }}
 </span>
 </template>
</a-table>
< template> cannot be keyed. Place the key on real elements instead.

提示< template>template不能写key, 即使没有这个错,表格数据也不会渲染出来,因为这一层没有slot,应该说slot应该是放最外面,同时把:key放里面

改成如下

<a-table>
 <template v-for="(item, index) in header" :slot="item.dataIndex" slot-scope="text">
 <span :key="index">
  {{ text }}
 </span>
 </template>
</a-table>

以上解决问题

有个slot没有渲染的问题

<template v-for="(slotname, idx) in ['status', 'sub_account_status']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tag v-if="text === '正常'" color="blue">{{ text }}</a-tag>
  <a-tag v-else color="red">{{ text }}</a-tag>
  </span>
 </template>
 <!-- 包名称、关联账号 -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  <a-tooltip placement="top" >
  <template slot="title">
  <span v-for="(item, index) in text" :key="index">{{ item }}<br/></span>
  </template>
  <div class="tableHidden">
  <a-tag v-for="(item, index) in text" :key="index">{{ item }} </a-tag>
  </div>
  </a-tooltip>
  </span>
 </template>

好像是因为2个v-for="(slotname, idx)"里的slotname名字一样了,对的,就是取的临时变量名,修改成不一样的就好了,神奇

<template v-for="(name, idx) in ['status', 'sub_account_status']" :slot="name" slot-scope="text" >
  // 上面那个name
  <span :key="idx">
  。。。
  </span>
 </template>
 <!-- 包名称、关联账号 -->
 <template v-for="(slotname, idx) in ['app_name', 'roles']" :slot="slotname" slot-scope="text" >
  <span :key="idx">
  。。。
  </a-tooltip>
  </span>
 </template>

以上这篇v-slot和slot、slot-scope之间相互替换实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
轮播图组件js代码
Aug 08 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
js实现中文实时时钟
Jan 15 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 #Javascript
解决vue scoped scss 无效的问题
Sep 04 #Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 #Javascript
基于vue中的scoped坑点解说
Sep 04 #Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 #Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 #Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 #Javascript
You might like
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
在python中bool函数的取值方法
2018/11/01 Python
python 字符串常用方法汇总详解
2019/09/16 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
pandas分组聚合详解
2020/04/10 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
副职竞争上岗演讲稿
2014/05/12 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
实习护士自荐信
2015/03/25 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Mysql数据库group by原理详解
2022/07/07 MySQL