自定义组件之间的双向绑定

Posted gufeibai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义组件之间的双向绑定相关的知识,希望对你有一定的参考价值。

在使用angular时,我们都知道输入框可以通过[(ngModel)]实现数据双向绑定,不可避免更多的会使用到组件之间互相传值,通常通过方括号[]和圆括号()实现组件之间的传值,只是以单向传值的方式会变得尤为繁琐,那么组件之间是不是也可实现像[(ngModel)]一样双向绑定互相传值的方式?

举个栗子~

实现通过点击父组件按钮显示子组件dialog,点击dialog确定按钮,关闭隐藏dialog。

1 // app.component.html
2 <h1>我是父组件</h1>
3 <button (click)="clickBtn()">点击我触发child组件</button>
4 <child [(isShow)]="isShow"></child>
 1 // app.component.ts
 2 import { Component, OnInit } from ‘@angular/core‘;
 3 @Component({
 4   selector: ‘app‘,
 5   templateUrl: ‘./app.component.html‘,
 6   styleUrls: [‘./app.component.css‘]
 7 })
 8 export class AppComponent implements OnInit {
 9    isShow: boolean = false; 
1
11    ngOnInit(){}
13    clickBtn() {
14       this.isShow = true;  // 初始化isShow值为true传给子组件
15    }
16 
17 }

此时子组件接收到父组件传过来的isShow的值:

1 // child.component.html
2 <div class="dialog_box" *ngIf="isShow">
3     <h1>我是子组件,是否将我关闭?</h1>
4     <p><span (click)="submit()">确定</span></p>
5 </div>
 1 import { Component, OnInit, EventEmitter } from ‘@angular/core‘;
 2 
 3 @Component({
 4   selector: ‘child‘,
 5   templateUrl: ‘./child.component.html‘,
 6   styleUrls: [‘./child.component.css‘]
 7 })
 8 
 9 export class ChildComponent implements OnInit {
10      @Input() isShow: Boolean;
11      @Output() isShowChange = new EventEmitter();
12 
13      ngOnInit() {}
14      submit(){
15         this.isShow = false;
16      }
17 }

以上,就实现了组件之间双向绑定,同时需要注意的地方,输出属性必须在输入属性的基础上加上“change”后缀,这里是不可以随便命名的,比如输入属性的变量名为data,那么传回给父组件接收的输出属性必须为dataChange

 

以上是关于自定义组件之间的双向绑定的主要内容,如果未能解决你的问题,请参考以下文章

vue组件双向绑定key的作用

Vue - 自定义组件双向绑定

Angular自定义组件实现数据双向数据绑定

vue3自定义组件使用v-model实现双向数据绑定

自定义一个双向绑定组件

Vue的双向绑定以及组件的自定义事件