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. 解决PHP无法监听9000端口问题/502错误解决办法

    问题背景 配置nginx+php服务的时候,发现网站能打开html,打开php文件就显示502,一般这个是php没启动啊啥的导致不能正常解析php文件. 原因分析 因为nginx解析php文件是交给f ...

  2. Exception 异常处理

    https://github.com/jazzband/django-redis/blob/master/django_redis/exceptions.py django-redis/base.py ...

  3. Hash Array Mapped Trie

    Hash Array Mapped Trie   Python\hamt.c

  4. Shiro中Subject对象的创建与绑定流程分析

    我们在平常使用Shrio进行身份认证时,经常通过获取Subject 对象中保存的Session.Principal等信息,来获取认证用户的信息,也就是说Shiro会把认证后的用户信息保存在Subjec ...

  5. 【.NET 与树莓派】i2c（IIC）通信

    i2c(或IIC)协议使用两根线进行通信(不包括电源正负极),它们分别为: 1.SDA:数据线,IIC 协议允许在单根数据线上进行双向通信--这条线既可以发送数据,也可以接收数据. 2.SCL:时钟线 ...

  6. Nginx配置WebSocket反向代理(Tomcat+Nginx)

    @toc WebSocket 和HTTP协议不同,但是WebSocket中的握手和HTTP中的握手兼容,它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket.这使得WebSo ...

  7. OutOfMemoryError系列

    OutOfMemoryError系列 1.[OutOfMemoryError系列(1): Java heap space](https://blog.csdn.net/renfufei/article ...

  8. Java泛型中的通配符T，E，K，V

    Java泛型中的通配符T,E,K,V 1.泛型的好处 2.泛型中的通配符 2.1 T,E,K,V,? 2.2 ?无界通配符 2.3 上界通配符 < ? extends E> 2.4 下界通 ...

  9. Nginx，Nginx 搭建图片服务器

    Nginx Nginx 概述 反向代理 工作流程 优点 1:保护了真实的web服务器,保证了web服务器的资源安全 2:节约了有限的IP地址资源 3:减少WEB服务器压力,提高响应速度 4:其他优点 ...

  10. trunk

    今天我们一起聊trunk(接vlan之后),一台switch我们用vlan就可以划分vlan(虚拟局域网),但是2台switch该怎么办呢? 实验环境搭建 switch0 : enable //切换到 ...