组件间的通讯————输入输出

一.
组件的输入属性 适用于父子组件
例子 :


我们在子组件中声明了两个输入属性 
image.png

我们在子组件模板中写下

image.png

我们在父组件的模板中写下

image.png

我们在父组件中声明


image.png

完成的效果如下

image.png

当我们选择在子组件中添加一个事件

image.png

得到的效果如下 这个主要想说明的是 ***********************************************
***********************************************************************************************************************************************************************************************************************************绑定是单向的只有父组件的值改变子组件 子组件的值改变不会影响父组件

image.png

二.
组件的输出属性

如下图 我们在子组件中定义了一个输出的属性 注意里面传输的泛型类型

image.png

于此同时 我们需要在父组件中接收这个发送出来的泛型类型

image.png

并在父组件的模板中定义一下

image.png

上面我们介绍的是父子之间的通讯方式 下面我们要介绍当两个组件不存在父子组件的关系时候需要做的处理
三 中间人模式
我们在子组件模板中声明

image.png

同时 我们在子组件上

image.png
image.png

同时我们在另一个子组件上 这个子组件有一个输入属性

image.png

同时我们在另一个子组件的模板上 定义

image.png

同时我们在父组件上

image.png

下面是 父组件模板的写法

image.png

四:
如果两个组件没有共同的父组件 使用一个可以注入的服务作为中间人 组件订阅服务的输出流

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容