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. 简单的DbContext工厂类（EFCore）

    前言 根据appsettings.json的中配置的数据库类型,使用工厂模式创建DbContext 代码实现 appsettings.json中的配置项 //使用的数据库类型 "Server ...

  2. 并发编程常用工具类(二) SymaPhore实现线程池

    1.symaPhore简介 symaphore(信号量)用来控制同时访问某个资源的线程数量,一般用在并发流量控制.个人对它的理解相当于是接待室每次只能接待固定数量的人,当达到最高接待数的时候,其他人就 ...

  3. 初审blucms(入坑)

    作为一名初来乍到审计小白,从blueCMS入手再好不过了.通过对入门级的cms进行审计以及一个整体的框架和常见的漏洞学习,对个人而言是一次不错的学习经历.话不多说直接进入主题. 代码审计环境 Blue ...

  4. 全栈性能测试修炼宝典-JMeter实战笔记（一）

    了解性能测试 性能测试不仅能够定位.分析问题,还要把握系统性能变化趋势:性能测试工程师能够帮助解决性能问题,搞定测试过程中的各种不合理配置,给出专业的优化建议. 第一章 性能方向职业发展 软件测试职业 ...

  5. grpc-metadata

    https://github.com/grpc/grpc-go/blob/master/Documentation/grpc-metadata.md https://github.com/grpc/g ...

  6. Connection Pool

    MySQL :: MySQL Connector/NET Developer Guide :: 4.3 Managing a Connection Pool in Connector/NET http ...

  7. vscode 远程开发安装

    1 首先windows 有ssh  程序 2 没有的话就直接使用git  bash 登录到远程服务器开发机上 3 再开一个Git bash  执行 ssh-keygen.exe   生成秘钥    然 ...

  8. loj10161 叶子的颜色

    CQOI 2009 给一棵有 mm 个节点的无根树,你可以选择一个度数大于 11 的节点作为根,然后给一些节点(根.内部节点.叶子均可)着以黑色或白色.你的着色方案应保证根节点到各叶子节点的简单路径上 ...

  9. 在 ASP.NET Core 应用中使用 Cookie 进行身份认证

    Overview 身份认证是网站最基本的功能,最近因为业务部门的一个需求,需要对一个已经存在很久的小工具网站进行改造,因为在逐步的将一些离散的系统迁移至 .NET Core,所以趁这个机会将这个老的 ...

  10. 有趣的css—隐藏元素的7种思路

    css隐藏元素的7种思路 前言 display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在 ...