vue slot nested bug

slot name bug

Error

<slot name="global-system-guide-slot"></slot>

    <GlobalSystemGuide>
<RightSuspension
slot="system-guide-slot"
:isFraud="suspensionObj.isFraud"
:isShowFraud="true"
@change="handleChangeRightSuspension">
</RightSuspension>
</GlobalSystemGuide>

<template>
<SystemGuide
@close-event="clickHandler"
placement="left"
:title="title"
:guideType="1"
:content="desc"
:buttons="[]"
:isGuideFinished="isFirstRead">
<slot name="global-system-guide-slot"></slot>
</SystemGuide>
</template>

OK, name + slot

<slot name="global-system-guide-slot" slot="system-guide-slot"></slot>

    <GlobalSystemGuide>
<RightSuspension
slot="global-system-guide-slot"
:isFraud="suspensionObj.isFraud"
:isShowFraud="true"
@change="handleChangeRightSuspension">
</RightSuspension>
</GlobalSystemGuide>
<template>
<SystemGuide
@close-event="clickHandler"
placement="left"
:title="title"
:guideType="1"
:content="desc"
:buttons="[]"
:isGuideFinished="isFirstRead">
<slot name="global-system-guide-slot" slot="system-guide-slot"></slot>
</SystemGuide>
</template>

slot

https://vuejs.org/v2/guide/components-slots.html

https://cn.vuejs.org/v2/guide/components-slots.html

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。

它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

新语法的由来可查阅这份 RFC。

old

https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


vue slot nested bug的更多相关文章

  1. vue自学入门-4(vue slot)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  2. vue stop event bug

    vue stop event bug [Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a func ...

  3. vue & vue router & match bug

    vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...

  4. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  5. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  6. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  7. vue slot 复用

    话不投机半句多,直接上代码 有3步 第一步:创建渲染slot的组件 重要 第二步:为slot添加父组件数据(props) 重要 第三步:使用 第一步:创建渲染slot的组件 首选创建一个单文件组价,由 ...

  8. vue slot

    一直觉得vue的slot比较申请,而且比较深奥,总有点不想用的感觉,事实上,在一定程度上,也真的可以完全避开slot就能把一个项目完全搭建完成. 但是随着用的次数越来越多,看到的内容也越来越多的情况, ...

  9. 1_02 Vue Slot

    slot 插槽 插槽内容 const component ={ template: ` <div> <slot></slot> </div> ` } n ...

随机推荐

  1. Spring之 IOC&依赖注入

    0x01.Spring 1什么是Spring ​ Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的(解耦). ​ 框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组 ...

  2. SpringBoot配置文件基础部分说明

    SpringBoot-yml文件配置说明 友情提示:有一些代码中有乱码,请脑补删除,适合快速入门 #开启spring的Bebug模式,可以查看有哪些自动配置生效 #debug=true #开启热启动, ...

  3. 一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章,很多读者反馈,文章没有揭示故障发生的详细

    一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章,很多读者反馈,文章没有揭示故障发生的详细

  4. PB 级大规模 Elasticsearch 集群运维与调优实践

    PB 级大规模 Elasticsearch 集群运维与调优实践 https://mp.weixin.qq.com/s/PDyHT9IuRij20JBgbPTjFA | 导语 腾讯云 Elasticse ...

  5. SELECT ... FOR UPDATE or SELECT ... FOR SHARE Locking Reads session

    小结: 1.注意使用限制 Locking reads are only possible when autocommit is disabled (either by beginning transa ...

  6. Redis集群动态增加和删除节点

    一.添加节点 1.首先将需要添加的节点启动: 这里启动redis6383.conf和redis6393.conf两个节点 查看原有节点:           3个主节点所对应的哈希槽(hash slo ...

  7. Spring听课笔记(专题二下)

    第4章 Spring Bean基于注解的装配 4.1 Bean的定义及作用域的注解实现 1. Bean定义的注解 -- @Component是一个通用注解,可用于任何bean -- @Reposito ...

  8. JDBC连接数据库,数据库访问层

    为什么需要JDBC JDBC API DriverManager JDBC驱动 JDBC的功能 JDBC步骤 数据访问层DAO DAO模式的组成 DAO模式的实际应用 为什么需要JDBC? JDBC是 ...

  9. form(form基础、标签渲染、错误显示 重置信息、form属性、局部钩子、全局钩子)

    form基础 Django中的Form使用时一般有两种功能: 1.生成html标签 2.验证输入内容 要想使用django提供的form,要在views里导入form模块 from django im ...

  10. Git实践笔记(一)

    Git是什么 Git是目前世界上最先进的分布式版本控制系统. 工作原理 / 流程: Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remo ...