公司业务需要，react、vue、angular都有接触[\无奈脸]。虽然说可以拓展知识广度，但是在深度上很让人头疼。最近没事的时候回忆各框架父子组件通信，发现很模糊，于是乎稍微做了一下功课，记录于此，以便加深理解。
一、react
React是单向数据流，当有多个组件需要共享状态的时候，这就需要把状态放到这些组件共有的父组件中，相应地，这些组件就变成了子组件，从而涉及到父子组件之间的通信。
父组件通过props 给子组件传递数据，子组件则是通过调用父组件传给它的函数给父组件传递数据。
父组件：
import React, { Component } from 'react';
import Child from './child'
class App extends Component {
constructor(props){
super(props);
this.state={
msg:'父类的消息',
name:'John',
age:50
};
this.callback = this.callback.bind(this);
}
// 通过子组件调用该方法接收从子组件传过来的消息
callback(msg,name,age){
this.setState({msg});
this.setState({name});
this.setState({age});
}
render() {
return (
<div className="App">
<p> Message: {this.state.msg}</p>
<Child callback={this.callback} age={this.state.age} name={this.state.name}>
</Child>
</div>
);
}
}
export default App;
子组件：
import React from "react"; class Child extends React.Component{ constructor(props){ super(props); this.state={ name:'Andy', age:20, msg:"来自子类的消息" };
// 这里目的是为了改变this的指向。使得在函数单独调用的时候，函数内部的this依然指向child组件，亦可用箭头函数的方式 this.change = this.change.bind(this); } change(){ //调用父组件的方法修改父组件的内容,即子传父 this.props.callback(this.state.msg,this.state.name,this.state.age); } // 通过this.props接收从父组件穿过来的消息 render(){ return( <div> <div>{this.props.name}</div> <div>{this.props.age}</div> <button onClick={this.change}>点击</button> </div> ) } } export default Child;
二、vue
1、父—>子
<!-- 父组件 -->
// 父组件通过属性绑定给子组件传值 <parent> <child :parentToChild="content"></child> </parent> data(){ return { content:'sichaoyun' }; }
<!-- 子组件 --> // 子组件通过props接收数据 export default { props: { parentToChild: String // 指定字符串类型，这里还有其他方式，可参考下面链接 } } //子组件接收后就可以在template中使用 // 或者在方法中通过this.parentToChild使用 <template> <div> <p>{{parentToChild}}</p> </div> </template>
2、子—>父
//vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据 <!-- 子组件代码 --> <template> <div @click="open"></div> </template> methods: { open() { this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据 } } <!-- 父组件代码 --> <child @showbox="toshow"></child> //监听子组件触发的showbox事件,然后调用toshow方法 methods: { toshow(value) { console.log(value); // the msg } }
3、补充以下用emit和on来进行父子以及兄弟组件通信的知识，双手奉上链接
三、angular2+
1、父—>子
// -----------------------------父组件--------------------------- // js:在装饰器下面的类里写的数据。 export class Father{ msg="来自父组件的问候" } // html: 通过属性绑定传值 <app-child [msg]="msg"></app-child> //放在子组件的属性上 // ----------------------------------子组件--------------------------- // js:引入Input模块 export class child{ @Input() msg; //子组件得到数据 } // html: <p>{{msg}}</p> //子组件进行页面渲染
2、子—>父
子组件使用EventEmitter创建自定义事件，并且通过@Output()装饰器把它作为属性暴露出来，父组件通过绑定这个属性来监听事件从而获取子组件数据。
// 使用emit自定义事件 // ------------------- 子组件代码----------------------------------------- // ts:导入Output和EventEmitter两个模块 export class Child{ @Output() constmEventToApp=new EventEmitter();//创建emit事件 ngInit(){ this.constmEventToApp.emit("数据") //在dom挂载时将数据放入自定义事件中 } } // -----------------------------父组件代码------------------------------ // html: <Child (constmEventToApp)="handleData($event)"></Child>//将子组件中的自定义事件绑定到父组件下面的子组件标签上。 // ts: export class Father{ handleDate(ev){ console.log(ev);//ev就是子组件所传递过来的数据 } }
总结至此！由于本媛才疏学浅，各处借鉴得此文章，so，有不对的地方欢迎各路大神指正，非常感谢！
特别鸣谢下面各位大神的文章，附上链接于此
参考链接：