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. SpringCloud zuul 网关限流分析

    最近项目中 spring cloud zuul 运用到限流功能,打算配置一下就直接使用,不过在压测与调优过程中遇到一些没有预测到的问题,附上排查与解析结果 yml.pom配置 强烈推荐,按最新gith ...

  2. NodeJS连接MongoDB数据库

    NodeJS连接MongoDB数据库 连接数据库的js文件[我将其命名为(connect.js)] // 引入mongoose第三方模块 const mongoose = require('mongo ...

  3. Bitter.Core系列五：Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore ORM 之 示例 分页聚联查询

    Bitter.Core 在聚联/分页聚联查询的时候,采用原生的MSSQL, MYSQL 语句查询,做过复杂高级项目的人知道,原生的聚合查询代码执行效率更高,更快,更容易书写,开发量最少. 借助原生的M ...

  4. 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践

    一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践 一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践-IM开发/专项技术区 - 即时通讯开发者社区! http://www.52im. ...

  5. loj10002喷水装置

    长L米,宽W米的草坪里装有N  个浇灌喷头.每个喷头都装在草坪中心线上(离两边各 W/2米).我们知道每个喷头的位置(离草坪中心线左端的距离),以及它能覆盖到的浇灌范围. 请问:如果要同时浇灌整块草坪 ...

  6. jQuery——开发插件

    当我们编写的代码可以供其他人甚至我们自己重用的时候,可以通过将这些代码打包成一个新插件. ###**在插件中使用别名∗∗自定义的插件就应该始终都使用jQuery这个名字来调用jQuery方法,或者也可 ...

  7. OSPF特殊区域和LSA

    OSPF路由计算优选次序: (1) 直连路由:本路由器发起的LSA 1.2: (2) 区域内路由:O: LSA 1.2: (3) 区域间路由:O IA: LSA 3: (4) 1类外部路由:O E1: ...

  8. jquery each报 Uncaught TypeError: Cannot use 'in' operator to search for错误

    用$.each()来遍历后台传过来的json数据.直接遍历传过来的数据时就发生 Uncaught TypeError: Cannot use 'in' operator to search for 这 ...

  9. docker部署 springboot 多模块项目+vue

    之前学习了docker,今天就来试试将这个项目打包成docker镜像并通过运行一个镜像来运行项目.这里使用的项目是el-admin.是一个开源的springboot后端管理框架(前端vue),有兴趣的 ...

  10. 使用Python调用SMTP服务自动发送Email

    需求背景 假设我们想设计一个定时任务,比如每天定时的用python来测试服务是否在正常运行,但是又不希望每天登录到系统后台去查看服务状态.这里我们就可以采取python的smtp模块进行任务结果广播, ...