父到子组件之间的数据传递
父组件模板中引用子组件
rush:js;">
// father template: ...
<child-item [name] = "fatherItemName" >
//...`
其中”fatherItemName” 为父组件中的属性,[name] 为子组件的输入
在子组件中使用 @input() name 来接受父组件传递的值
如果在接收值前需要进行一些处理,可以使用setter 拦截输入属性
这时的 _name 作为临时变量,作为set 和get的中转。
父组件中:
rush:js;">
< child-item [namestr] = “fatherItemName” >
name -> namestr
使用getter 输出
rush:js;">
get namestr(){ return _name; }
插值时 {{ nameStr }}
子到父组件之间的数据传递
1. 事件传值
rush:js;">
// father template: ...
<child-item (childEvent) = "fatherFunction($event)">
//...
export class FatherComponent{
fatherFunction(){
alert('hello!');
}
}
子组件
rush:js;">
//...
< p (click) = "clickThis"> click p>
//...
@Output() childEvent = new EventEmitter();
clickThis(){
this.childEvent.emit();
}
2.父组件通过局部变量获取子组件的引用
rush:xml;">
3.使用@ViewChild 获取子组件的引用
rush:js;">
@ViewChild(ChildComponent) child: ChildComponent;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/38093.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。