美文网首页
(八)1组件间的通讯---输入输出属性

(八)1组件间的通讯---输入输出属性

作者: 马丁路德东 | 来源:发表于2017-07-18 16:26 被阅读0次

黑盒模型 ——— 我不知道我从哪里来,我也不知道我要到那里去,我就在这里。
—— 马丁路德.东

(一)输入属性就是被@Input属性注解的属性(父给子)

  1. 子组件的控制器的格式


    image.png

    2.父组件html定义输入属性但是子组件的数据变化不会影响父组件

image.png

(二)输出属性被@Output属性装饰(子发父)

语法很操蛋,又是一个什么订阅什么 -----马丁路德.东

1.priceQuote定义数据类型(只是这个例子需要而已)

image.png

2.子组件控制器的写法

image.png

3.父组件初始写法。

image.png

4.父组件HTML的初始写法

image.png

5.父组件HTML添加时间绑定(注意虚参类型)

image.png

6.父组件控制器终极写法

image.png

7.注意此处的名字可以设置

image.png

在这里设置


image.png

(三)父子组件之间数据互通的另一种写法

1.子组件控制器声明属性

image.png

2.父组件模板绑定属性

image.png

3.子组件控制器添加发射属性

image.png

添加发射事件

image.png

这样就实现了父组件的newRating和子组件的rating的数据共享。

相关文章

  • (八)1组件间的通讯---输入输出属性

    黑盒模型 ——— 我不知道我从哪里来,我也不知道我要到那里去,我就在这里。—— 马丁路德.东 (一)输入...

  • 组件通讯

    2017年46周学习总结 angular组件间通讯 组件输入输出 当子组件需要向父组件传递信息时需要用到输出属性,...

  • angular4学习笔记整理(四)组件间通讯、管道

    之后的笔记就写的快一点 组件间通讯 1.组件间通讯 。父组件向子组件输入属性用 子组件声明接收父组件的属性@in...

  • vue组件通信

    1.组建通讯---父子组件通讯 父子通信通过props属性进行传值 父组件 子组件 1.组建通讯---子父组件通讯...

  • 同级之间传值

    一.父子组件 1.父组件到子组件通讯父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方...

  • 转载-微信小程序-基础组件

    一 什么是组件? 二 属性 1 属性类型 2 共同属性类型 3 特殊属性 三 八类基础组件 1 视图容器...

  • vue2-父子组件通信

    父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String...

  • vue.js系列三:组件间通信

    1.组件间通信基本原则 2.vue 组件间通信方式 2.1组件间通信 1: props(适用于父子组件传递属性) ...

  • 面试题总结--vue

    1-vue优点 易学易用、双向数据绑定、组件化、虚拟dom、渐进式 2-组件通讯 父传子:通过属性向子组件...

  • Angular 组件通讯,依赖注入

    1. 组件通讯 1.1 向组件内部传递数据 注意:在属性的外面加 [] 表示绑定动态值,在组件内接收后是布尔类...

网友评论

      本文标题:(八)1组件间的通讯---输入输出属性

      本文链接:https://www.haomeiwen.com/subject/hzrhkxtx.html