angular双向绑定详解

目录

双向绑定原理

双向绑定将属性绑定与事件绑定结合在一起。mport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';@Component({ selector: 'app-inner', templateUrl: './inner.component.html', styleUrls: ['./inner.component.scss']})export class InnerComponent implements OnInit { // 设定输入属性 @Input() value!: string; // 设定输出事件 @Output() valueChange: EventEmitter<string> = new EventEmitter(); constructor() { } ngOnInit(): void { } onInput(value: string){ // 触发输出事件-输出数据 this.valueChange.emit(value); }}

外部使用

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-outer',  template: `    <div>      <div>Name: {{ name }}</div>      <app-inner [(value)]="name"></app-inner&gwww.easck.comt;    </div>  `})export class OuterComponent implements OnInit {  name = '';  constructor() { }  ngOnInit(): void { }}

效果图

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!