这里就很自然的产生一个新问题：如何给相应的子组件传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. Java 通过Jna调用dll路径问题

    调试阶段 C++ dll --> window/system32C# dll --> C:\Program Files\Java\jdk1.8.0_171\bin [jdk bin] 打包 ...

  2. XCTF-WEB-高手进阶区-NaNNaNaNNaN-Batman-笔记

    上来直接百度先搜下Batman -_-|| 不存在的传令兵么 本身是下载下来了一个文件web100 打开发现是如下内容 可以看出这个是个脚本语言,因此尝试修改后缀为html,发现是一个OK框 现在是想 ...

  3. FTP服务器搭建及自动备份设置

    本次随笔内容主要是FTP服务器搭建. 其实去年十月服务器就搭建完了.当时写了个PPT保存了一下,准备以后写博客,结果时隔快一年我自己都快要看不懂我自己写的PPT了  ( = o = ) 不过还是尽量尝 ...

  4. Phthon环境搭建

    一,官网去下载 https://www.python.org/downloads/ 二,安装 三,验证python 四.IPython IPython 是一个 python 的交互式 shell,比默 ...

  5. Visual-platform，基于Vue的可视化大屏开发GUI框架

    visual-platform 基于Vue的可视化大屏开发GUI框架 ------ CreatedBy 漆黑小T 构建用于开发可视化大屏项目的自适应布局的GUI框架. github仓库: https: ...

  6. 2020-05-27：SpringCloud用了那些组件？分布式追踪链怎么做的？熔断器工作原理？

    福哥答案2020-05-27: SpringCloud分布式开发五大组件详解服务发现——Netflix Eureka客服端负载均衡——Netflix Ribbon断路器——Netflix Hystri ...

  7. C#LeetCode刷题之#100-相同的树（Same Tree）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4066 访问. 给定两个二叉树,编写一个函数来检验它们是否相同. ...

  8. HTML基础-04

    定位 定位:通过定位可以将元素摆放在页面中任意位置 语法:position属性设置元素的定位 可选值:static:默认值,开启定位 relative开启相对定位 absolute开启绝对定位 fix ...

  9. 深入了解Promise对象，写出优雅的回调代码，告别回调地狱

    深入浅出了解Promise 引言 正文 一.Promise简介 二.Promise的三种状态 三.函数then( ) 四.函数catch( ) 五.函数finally( ) 六.函数all( ) 七. ...

  10. 【小白学AI】随机森林 全解 （从bagging到variance）

    文章转自公众号[机器学习炼丹术],关注回复"炼丹"即可获得海量免费学习资料哦! 目录 1 随机森林 2 bagging 3 神秘的63.2% 4 随机森林 vs bagging 5 ...