Angular Input 和 Output传值的差别

父子组件进行信息交流

1. 基础步骤

2. 具体操作请参考
   https://blog.csdn.net/qq_43579525/article/details/83935694
3. 当父组件定义了一个getDataFromChild 函数时，传入子组件中后，当子组件调用时

// 父组件函数
value: number;
getDataFromChild(data){
	alert(data);
}

// 子组件调用
clickButton(){
	this.getDataFromChild();
}

4. 正常使用没有问题，当父组件中需要赋值到自己的一个变量时，此时会发现 this.value 是 undefined
5. 在父组件的getDataFromChild 中打印 this 会发现，this 指向的是子组件

value: number;
getDataFromChild(data){
	alert(data);
	console.log(this);
	this.value = data; // 此句报错
}

6. 此时可以得出结论， @Input 比较适合传入变量，而不适合传入函数进行回调
7. 使用 @Ouput, emit 事件传入父组件的方法则不会出现问题