angular子父元件之間的互動

2021-10-01 07:35:00 字數 1286 閱讀 7393

子元件傳遞的是乙個字串,可以根據相應的需求定義成如數字,陣列,物件等型別。

import  from '@angular/core';

@output() private childouter = new eventemitter();

@output() private childouter2 = new eventemitter();

sendparent()

因為父元件可以使用多個子元件,也就相當於乙個子元件能呼叫父元件的不同方法

msg = any; 

runparent(msg:string)

runparent2(msg:string)

父元件ts裡定義需要傳遞的資料變數:

fathermsg: string;

this. fathermsg = 『字串』;

使用子元件:

childmsg是子元件接收資料的識別符號,fathermsg是父元件傳遞的資料的識別符號。父元件傳遞的是乙個字串,可以根據相應的需求定義成如數字,陣列,物件等型別。

import  from '@angular/core';

@input() fathermsg:string;

childmsg = any;

demo()

子元件在頁面使用父元件的資料的時候可以使用}。

接收字串變數,可以根據相應的需求定義成如數字,陣列,物件等型別。

demo( fathermsg: string)
定義測試資料

childdata1: 『child1』;

childdata2: 』child2』;

宣告乙個由viewchild裝飾器裝飾的變數父元件中獲得子元件#的引用

import  from '@angular/core';

@viewchild('child1')

child1:child1component;

//ts內使用子元件的demo方法

this.child1.demo(childdata1);

在頁面使用子元件的demo方法

呼叫child2的demo方法

angular 父元件和子元件

export class childcomponent implements oninit ngoninit greeting name string 按鈕呼叫child2的greeting方法 viewchild child1 child1 childcomponent ngoninit void...

angular中父元件子元件之間相互傳值

父元件 contacts.component.html 子元件 header.component.ts裡 import from angular core input private msg string constructor ngoninit header.component.html 結果渲染...

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...