Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)

简介: Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)

app.component.html

<app-in-out [in]='"传输进入"' (out)="out($event)" ></app-in-out>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  out($event: any) {
    alert($event);
  }
}

in-out/in-out.component.html

<h1>来自父组件的参数:{{in}}</h1> 
<button (click)="out.emit('向父组件传参')">向父组件传参</button>

in-out/in-out.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-in-out',
  templateUrl: './in-out.component.html',
  styleUrls: ['./in-out.component.css']
})
export class InOutComponent implements OnInit {
 
  constructor() { }
 
  @Input() in: any = '';//从父组件传入参数进来
  @Output() out = new EventEmitter;//从子组件传出参数到父组件(采用事件的方式,类似Vue的emit)
  
  ngOnInit(): void {  }
 
}

实现效果



相关文章
|
15天前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
81 3
|
14天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
15天前
|
人工智能 前端开发 JavaScript
React、Vue、Angular的发展之旅
React、Vue、Angular的发展
|
15天前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
15天前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)
|
15天前
|
开发框架 前端开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(二)
探索前端开发框架:React、Angular 和 Vue 的对决(二)
|
15天前
|
开发框架 前端开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(一)
探索前端开发框架:React、Angular 和 Vue 的对决(一)
|
15天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
31 3
|
15天前
|
前端开发 JavaScript
vue、react、angular 区别
vue、react、angular 区别
|
15天前
|
前端开发 JavaScript
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
25 0