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 {  }}

實現效果

總結

以上是生活随笔為你收集整理的Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。