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. canvas性能-drawImage渲染图片

    canvas性能-绘制图片 目录 canvas性能-绘制图片 canvas绘制图片 drawImage putImageData createPattern 测试绘制耗时 drawImage Imag ...

  2. 编译Nacos,解决No Server available 以及 failed to req API__nacos_v1_ns_instance after all servers

    问题描述:如图,显示没有服务可用 仔细看控制台,看到上面Error部分,相关参数没有读取到配置信息,那么配置信息这块似乎是有问题,赶紧看看IDE对配置信息的扫描情况: 可以看到有信息了,但是报错:No ...

  3. GDB查看内存命令(x命令) 用gdb查看指定地址的内存内容

    GDB查看内存命令(x命令) - super119 - 博客园 https://www.cnblogs.com/super119/archive/2011/11/18/2254382.html 可以使 ...

  4. 【Python网络编程】epoll用法

    epoll发展进程 此处添加一下select.poll历程及其优缺点 原理 使用步骤 Create an epoll object--创建1个epoll对象 Tell the epoll object ...

  5. v-show和v-if指令的共同点和不同点?

    共同点:都能控制元素的显示和隐藏:不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次:v-if是动态的向DOM树内添加或者删除DOM元 ...

  6. 在项目中如何自定义的Eslint配置

    一.设置js风格的缩进为4个空格 在你的前端项目中找到.eslintrc.js文件,如图 module.exports = { root: true, parserOptions: { parser: ...

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

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

  8. Spring Boot 微服务应用集成Prometheus + Grafana 实现监控告警

    Spring Boot 微服务应用集成Prometheus + Grafana 实现监控告警 一.添加依赖 1.1 Actuator 的 /prometheus端点 二.Prometheus 配置 部 ...

  9. OpenStack (neutron 网络服务)

    neutron介绍 提供 OpenStack 虚拟网络服务,也是 OpenStack 重要的核心模块之一,该模块最开始是 Nova 的一部分,叫 nova-network,后来从 Nova 中分离出来 ...

  10. Kafka调试入门(一)

    很多人对kafka消息队列应该不陌生,使用起来也比较方便.对kafka最常见的操作一般有如下几种: 启动kafka集群 创建一个名称为xxx的主题(topic) 查看已经创建好的主题 向xxx这个主题 ...