这里就很自然的产生一个新问题：如何给相应的子组件传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. 史上最全的微信小程序代码大全

    --------------------- 本文来自 fenxiangjun 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/fenxiangjun/article/d ...

  2. Azure DevOps+Docker+Asp.NET Core 实现CI/CD(二.创建CI持续集成管道)

    前言 本文主要是讲解如何使用Azure DevOps+Docker 来实现持续集成Asp.NET Core项目(当然 也可以是任意项目). 上一篇: Azure DevOps+Docker+Asp.N ...

  3. XCTF-WEB-新手练习区(5-8)笔记

    5:disabled_button X老师今天上课讲了前端知识,然后给了大家一个不能按的按钮,小宁惊奇地发现这个按钮按不下去,到底怎么才能按下去呢? 删除disable="" 字段 ...

  4. eclipse中启动tomcat出现错误的解决方法

    前段时间跟着老师做课设,各方面调试都没有问题.近段时间想起来,看看之前写过的代码,翻着翻着就发现启动tomcat出现了错误 错误如下: 错误原因:tomcat路径配置有问题,之前可能配置好了然后由于种 ...

  5. day7 地址 名片管理系统

    1 无限循环  (while  True)   break 退出     人为设计的 ,并且有退除的出口      死循环 bug  错误 2.引用   数字型

  6. SpringBoot整合Redis、mybatis实战，封装RedisUtils工具类，redis缓存mybatis数据 附源码

    创建SpringBoot项目 在线创建方式 网址:https://start.spring.io/ 然后创建Controller.Mapper.Service包 SpringBoot整合Redis 引 ...

  7. MySQL · 性能优化 · MySQL常见SQL错误用法（转自-阿里云云栖社区）

    作者:阿里云云栖社区链接:https://zhuanlan.zhihu.com/p/26043916来源:知乎著作权归作者所有,转载请联系作者获得授权. 前言 MySQL在2016年仍然保持强劲的数据 ...

  8. Jmeter 常用函数（6）- 详解 __P

    如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 和 __property 作用一样,不 ...

  9. 4.设置静态IP

    由于Ubuntu重启之后,ip很容易改变,可以用以下方式固定ip地址 1.设置ip地址 vi /etc/network/interface # The loopback network interfa ...

  10. 通过自定义资源扩展Kubernetes

    原文链接:通过自定义资源扩展Kubernetes