组件之间的通信之动态组件

原创 2018年04月17日 08:59:00
1.什么叫做动态组件
通过:is="XXX"绑定的组件,被绑定的变量被定义在data里面可以进行动态的更新。
类似路由<router-view></router-view>
<keep-alive>
<com-a></com-a>
</keep-alive>
//在切换组件的时候,<keep-alive>可以存储下当前的组件,以便在后序切换回来的时候提高效率

2.组件之间的交互方式
(1)父组件向内传递一个props
<com-a :my-prop="prop1">
在子组件内部,通过定义这个props来获取父组件传进来的数据
export default{
   props:{
prop1:[Number,String],
prop2:[Number,String]
......
}
}
(2)子组件触发一个事件,父组件通过监听这个事件来获取子组件的信息
(3)父组件通过向子组件插入插槽 子组件使用标签<slot>进行接收

总结:
(1)使用组件树设计项目,配置文件链接各个组件 -命名转换,动态组件is :bind
(2)父组件向内传递属性-动态属性
(3)子组件向外发布事件 
(4)插槽传递模板-    默认slot,具名slot
 

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Milan_KunderLa/article/details/79969520

Vue2.0组件之间通信

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信。 首先我...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-01 09:00:30
  • 7436

React -- 组件间通信

分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信父组件向子组件通信父组件通过子组件的props向子组件传递需要的信息。子组件向父组件通信...
  • u014328357
  • u014328357
  • 2017-06-22 09:42:25
  • 735

React 各种组件关系通信

前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可...
  • qq_22509715
  • qq_22509715
  • 2016-11-30 10:33:28
  • 2525

vue-cli工程下组件之间的通信

vue-cli工程下组件之间的通信
  • qq_38563845
  • qq_38563845
  • 2017-08-21 10:07:51
  • 2143

Android组件之间通信

我们首先梳理下一般我们在安卓中不同组件之间通信有哪些方式  (Tips:以下讨论除了文件存储和ContentProvider等,一般都是指在同一进程内通信,如果要实现跨进程的通信,还需要借助Messe...
  • xiaoxiao_job
  • xiaoxiao_job
  • 2016-11-07 14:49:29
  • 1601

Angular 2 组件之间如何通信?

转载自:Angular 2 组件之间如何通信? 组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angu...
  • qq_15096707
  • qq_15096707
  • 2016-10-19 14:27:55
  • 15124

Android组件之间的通信方式

Android组件之间的通信方式 **学习Android也有一段时间了,有很多总结,一直没整理。想起来的时候懒得整理,想整理的时候又懒得去想。今天总结下四大组件之间的通信方式。如若有不足和错误,欢迎...
  • qq_16051379
  • qq_16051379
  • 2015-08-21 15:14:43
  • 1990

react没有嵌套关系的组件之间通信方法详解

一、在react中,没有嵌套关系的组件之间的通信方式主要有2种: a、拥有共同父组件的兄弟组件之间可以使用context。 具体使用方法可以参考:https://www.jianshu.c...
  • bbgdebb
  • bbgdebb
  • 2018-01-08 19:17:24
  • 300

组件与组件之间的通信以及vue2.0中的变化、示例

一、开始第一个DEMO,其中一个功能需求--组件与组件之间作用域里,但又需要传递数据。 例如:App.vue为父组件,有子组件A.vue、B.vue 1.App的数据传递给A、B 2.A、B的数据传递...
  • qq_24122593
  • qq_24122593
  • 2016-12-07 18:53:29
  • 14500
收藏助手
不良信息举报
您举报文章:组件之间的通信之动态组件
举报原因:
原因补充:

(最多只允许输入30个字)