父子组件进行信息交流
- 基础步骤
- 具体操作请参考
https://blog.csdn.net/qq_43579525/article/details/83935694
- 当父组件定义了一个
getDataFromChild
函数时,传入子组件中后,当子组件调用时
// 父组件函数
value: number;
getDataFromChild(data){
alert(data);
}
// 子组件调用
clickButton(){
this.getDataFromChild();
}
- 正常使用没有问题,当父组件中需要赋值到自己的一个变量时,此时会发现 this.value 是
undefined
- 在父组件的
getDataFromChild
中打印 this 会发现,this
指向的是子组件
value: number;
getDataFromChild(data){
alert(data);
console.log(this);
this.value = data; // 此句报错
}
- 此时可以得出结论,
@Input
比较适合传入变量,而不适合传入函数进行回调
- 使用
@Ouput
, emit 事件传入父组件的方法则不会出现问题