时间:2021-05-26
实现父子组件双向数据流整体的思路是:
1,父组件可以向子组件传递props,props中带有初始化子组件的数据,还有回调函数
2,子组件的state发生变化时,在子组件的事件处理函数中,手动触发父函数传递进来的回调函数,同时时将子组件的数据传递回去(有时间研究)
父组件
父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量。
父组件的render函数中利用<Table list={this.state.list}/>此种形式传递给子组件
(ps:此例子中也包含组件之间的嵌套,同时组件的名称开头字母必须大写,不然会报错)
import React from 'react';import Footer from './footer.js'import Table from './table.js'class pagedemo extends React.Component { constructor(props) { super(props); this.state = { list: [{ 'id':'1', 'title':'123', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'2', 'title':'456', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'3', 'title':'789', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' }] } } render() { let list = this.state.list; return ( <div className="content"> <div className="content_main"> <Table list={list}/> //组件之间的通讯 </div> <Footer /> //组件嵌套 </div> ); }}export default pagedemo;子组件(table.js)
子组件调用父组个传递过来的参数,并进行传值
import React from 'react';function table(props) { console.log(props); return ( <div className="table_main"> <table> <tbody> <tr className="first_tr"> <td>内容</td> <td>发起人</td> <td>类型</td> <td>时间</td> <td>操作</td> </tr> { props.list.map(function(name){ //接受父组件传递过来的值并进行处理 return ( <tr key={name.id}> <td>{name.title}</td> <td>{name.person}</td> <td>{name.type}</td> <td>{name.time}</td> <td>{name.operation}</td> </tr> ) }) } </tbody> </table> </div> )}export default table;以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近面试,被问到一个题目,vue做一个按钮组件;当时只是说了一下思路,回来就附上代码。解决思路:通过父子组件通讯($refs和props)props接受参数,$
父子组件之间可以通过props进行通信:组件的定义:1.创建component类:varProfile=Vue.extend({template:"Lily";
props属性是父子组件之间的通信桥梁。何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件。我们知道,处于安全考虑,组件模板里我们无法直接使用
通讯是单向的,数据必须是由一方传到另一方。1.父组件与子组件间的通信。在React中,父组件可以向子组件通过传props的方式,向子组件进行通讯。父组件App.
1.vue中各个组件之间传值1.父子组件父组件–>子组件,通过子组件的自定义属性:props子组件–>父组件,通过自定义事件:this.emit(′事件名′,参