Vue 与 React 父子组件之间的家长里短

原创 Bios 随笔 vuejs 256阅读 2018-06-08 16:58:51 举报

原文博客地址:https://finget.github.io/2018/06/08/vue-react-props/

Vue

父组件向子组件传值:

  1. 在父组件中引入并注册子组件
  2. 在子组件中定义 props:['msg'] (不能省略引号)
  3. 通过 :msg="msg" 的方法传递变量,也可以通过 msg="msg" 传递字符串

父组件调用子组件的方法:

  1. 在父组件中给子组件绑定一个 ref="xxx" 属性
  2. 通过 this.$refs.xxx.方法 调用

子组件向父组件传值:

  1. 在子组件中定义一个方法
  2. 通过 this.$emit('事件名','参数') 派发一个事件,并传递参数
  3. 父组件中通过 @事件名 的方式监听事件
  4. 父组件中定一个一个方法,该方法的参数对应子组件传递过来的参数

子组件调用父组件的方法:

子组件可以通过this.$parent.xxx 直接调用父组件的方法。

通过子组件派发的事件,不仅可以向父组件传递参数,父组件也可以通过传递的参数,改变向子组件传递的值,从而改变子组件。

props 还可以进行一系列的格式校验,更多内容查看官网

React

父组件向子组件传值:

  1. 在父组件中引入子组件
  2. 通过 connect={this.state.con} 方式可以传递值
  3. 子组件通过 this.props.connect 接收

父组件调用子组件的方法:

  1. 给子组件传递一个方法 onRef={this.onRef}
  2. 子组件在 componentDidMount 生命周期里 调用这个方法,并回传自身实例
  3. 父组在该方法中接收子组件实例,并挂载在父组件实例属性上,例:this.child = ref
  4. 最后就可以通过 this.child.xxx 直接调用子组件方法

子组件向父组件传参:

  1. 在父组件中给子组件传递一个方法,click={(msg) => this.faClick(msg)}
  2. 在子组件中通过一个事件接收这个方法,onClick={this.click}
  3. 通过click= ()=> {this.props.click('哈啊哈');} 从而传递参数

子组件调用父组件方法

  1. 父组件可以直接传递一个方法给子组件
  2. 子组件可以通过 this.props.xxx 调用

不能直接通过 <button onClick={this.props.click('哈啊哈')}>接收父组件的方法</button> 进行传参,这样在组件初始化时,事件就执行了。

Vue 与 React 的不同:

  1. React 的子组件中不用定义父组件传值对应的变量
  2. React 的子组件不用派发事件,父组件可以直接传递方法
  3. 子组件通过this.props.click 可以调用父组件传递的方法,并传参
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复