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. 解决windows与虚拟机ubuntu互相ping不通的问题

    工作中经常用Ubuntu开发,而Ubuntu是安装在虚拟机中的,在弄网络开发的时候经常会用windows下的网络调试工具与Ubuntu中写好的网络程序进行通信,首先要保证windows与Ubuntu能 ...

  2. Apache Unomi 远程代码执行漏洞复现(CVE-2020-13942)

    一.漏洞描述 Apache Unomi 是一个基于标准的客户数据平台(CDP,Customer Data Platform),用于管理在线客户和访客等信息,以提供符合访客隐私规则的个性化体验.在Apa ...

  3. 电脑微信电脑PC 多开/防撤回 补丁

    简介 经常使用微信电脑版的用户都会发现一个蛋疼的事情,那就是微信PC版不支持多开,也就是不能同时登陆多个账号,这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便.另外有的时候别人撤回了一些 ...

  4. 基于nginx的频率控制方案思考和实践

    基于nginx的频率控制方案思考 标签: 频率控制 nginx 背景 nginx其实有自带的limit_req和limit_conn模块,不过它们需要在配置文件中进行配置才能发挥作用,每次有频控策略的 ...

  5. 配置完xadmin源码包后启动报错“ Apps aren't loaded yet.”

    raise AppRegistryNotReady("Apps aren't loaded yet.") django.core.exceptions. 碰到这种情况就要查看下是否 ...

  6. autoreload 线程 进程管理 并发的处理方法

    Django  autoreload https://github.com/django/django/blob/9386586f31b8a0bccf59a1bff647cd829d4e79aa/dj ...

  7. loj10161 叶子的颜色

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

  8. docker基本使用-nginx

    在docker环境中部署使用nginx 1,安装nginx docker pull nginx 2,随便启动一下nginx,测试是否安装成功 a,启动nginx sudo docker run --n ...

  9. Android webview 问题记录

    1. Android 7.1真机安装调试apk时报错,解析安装包失败 原因:sdk版本不支持7.1版本,需要调整minSdkVersion等参数,支持低版本 解决方法: android { compi ...

  10. Jenkins（3）拉取git仓库代码，执行python自动化脚本

    前言 python自动化的脚本开发完成后需提交到git代码仓库,接下来就是用Jenkins拉取代码去构建自动化代码了 新建项目 打开Jenkins新建一个自由风格的项目 源码管理 Repository ...