这里就很自然的产生一个新问题：如何给相应的子组件传props？

解答：直接通过$attrs $listeners实现祖孙通信。

<!-- 传值通过$attrs $listeners 实现祖孙传值通信 -->
 <component :is="currentForm" @closeDialog="closeDialog" v-bind="$attrs" v-on="$listeners"></component>

vue <compent> 结合is实现动态切换子组件的更多相关文章

  1. Vue.js 动态挂载子组件

    直接来实例 父组件 <template> <div> <div :is="sub.content" :ref="sub.name" ...

  2. vue 父到子动态传值 子组件实时渲染

    近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref=" ...

  3. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  4. vue中.sync修饰符，实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  5. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  6. vue全局引入公共scss样式，子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  7. Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听

    一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. vue 根据下拉框动态切换form的rule

    taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 ...

  9. Vue less使用scope时渗入修改子组件样式

    @deep: ~'>>>'; .wrap { @{deep} .component1 { width: 120px; } }

随机推荐

  1. Springboot+swagger2.7集成开发

    Springboot+swagger2.7集成开发 本篇文章是介绍最新的springboot和swagger2.7集成开发和2.0稍微有一些出入: Springboot集成环境配置 Swagger2. ...

  2. Python人脸识别 + 手机推送，老板来了你就会收到短信提示

  3. SonarQube 自定义规则开发

    SonarQube 自定义规则开发 满足一些特定需求的时候,需要自己开发代码规则. 环境 和前文的演示环境一致. 步骤 开发步骤见 Writing Custom Java Rules 101,这是官方 ...

  4. C#算法设计之知识储备

    前言 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/669 访问. 算法的讨论具有一定的规则,其中也包含一些不成文的约定 ...

  5. ThinkPHP 6.0 基础教程 - 安装

    ThinkPHP6.0 的环境: PHP >= 7.1.0 我本地环境: Win10 PhpStudy 安装 PhpStudy 如果你已经安装 PhpStudy 或其他环境,请忽略这里 安装方法 ...

  6. python设计模式之状态模式

    python设计模式之状态模式 面向对象编程着力于在对象交互时改变它们的状态.在很多问题中,有限状态机(通常名为状态机)是一个非常方便的状态转换建模(并在必要时以数学方式形式化)工具.首先,什么是状态 ...

  7. 第三章 kubernetes核心原理

    kubernetes API Server 提供了Kubernetes各类资源对象(如pod,re,service等)的增删改查及watch等Http Rest接口,成为集群内各个功能模块之间数据交互 ...

  8. hive命令大全

    1.等值比较: =语法:A=B操作类型:所有基本类型描述: 如果表达式A与表达式B相等,则为TRUE:否则为FALSEhive> select 1 from iteblog where 1=1; ...

  9. nova卸载volume源码分析

    基于llvm +iscsi协议进行分析 1.客戶端接受请求并路由到 VolumeAttachmentController 其对应的restfull请求格式如下:delete /servers/{ser ...

  10. 操作系统-存储管理（6）buffer/cache/swap

    为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果没有则通过驱动程序直接操作磁盘. 缓存 ...