在ES6中子组件调用父组件使用方法

es6下如何实现子组件调用父组件?下面我就为大家分享一篇es6下子组件调用父组件的方法。希望对大家有所帮助。

出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。

这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错。

因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同。

es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的。。

具体的写法就是在constructor中添加 this.xxxxx = this.xxxxx.bind(this);

或者在子组件绑定的时候就写this.xxxxx.bind(this) .

这里就不多讲了,下面上代码,以供需要的人参考。

export default class TestPrj extends Component {    constructor(props){      super(props);      this.timesReset = this.timesReset.bind(this);      this.state = {timex:2};    }    timesReset(){      this.setState({        timex:0      });    }    render() {      return(                            //或者              );    }  } class Son extends Component{    constructor(props){    super(props);    this.state = {times:this.props.timex};  }  componentWillReceiveProps(props){    console.log(this.props);    this.setState({      times:props.timex    })  }  timesReset(){    this.props.timesReset();  }  render(){    return(                儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!!                    爹,再给你儿子一次机会!!              );  }}

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

如何使用ExtJs整合Echarts(详细教程)

如何使用ExtJs整合Echarts(详细教程)

如何使用ExtJs整合Echarts(详细教程)

以上就是在ES6中子组件调用父组件使用方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3189143.html

(0)
上一篇 2025年3月31日 23:41:46
下一篇 2025年3月31日 23:41:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vuejs 单文件组件(详细教程)

    这篇文章主要介绍了vuejs 单文件组件实例详解,需要的朋友可以参考下 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这…

    编程技术 2025年3月31日
    100
  • vue中如何实现methods方法之间调用

    下面我就为大家分享一篇vue中实现methods一个方法调用另外一个方法,具有很好的参考价值,希望对大家有所帮助。 vue在同一个组件内; methods中的一个方法调用methods中的另外一个方法 可以在调用的时候  this.$opt…

    编程技术 2025年3月31日
    100
  • vue中调用methods的方法

    下面我就为大家分享一篇vue中实现在外部调用methods的方法,具有很好的参考价值,希望对大家有所帮助。 1.首先定义一个公共的vue组件; var eventHub = new Vue(); 登录后复制 2.在事件当前的组件中,在cre…

    编程技术 2025年3月31日
    100
  • Vue组件通信(详细教程)

    这篇文章主要给大家介绍了关于vue组件通信的四种方式,分别是父子组件通信、非父子组件的eventbus通信、利用localstorage或者sessionstorage以及利用vuex等方法,需要的朋友可以参考借鉴,下面一起学习学习吧。 前…

    编程技术 2025年3月31日
    100
  • 在Vue中如何实现事件响应式进度条组件

    这篇文章主要介绍了vue的事件响应式进度条组件的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下 写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接…

    2025年3月31日
    100
  • jquery.picsign中如何使用图片标注组件

    这篇文章主要介绍了jquery.picsign 自己封装的第一个开源组件,需要的朋友可以参考下 经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教。 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足…

    2025年3月31日
    100
  • vue-cli组件导入使用步骤详解

    这次给大家带来vue-cli组件导入使用步骤详解,vue-cli组件导入使用的注意事项有哪些,下面就是实战案例,一起来看一下。 一个文件就是一个模块,需要引入模块,和暴露模块的方法 在一个组件中使用另一个组件三部曲:引入组件、注册组件、使用…

    2025年3月31日 编程技术
    100
  • 有关Vue组件中slot的用法有哪些(详细教程)

    这篇文章交详细的给大家介绍了vue组件中slot的用法,主要是让组件的可扩展性更强,具体内容详情大家参考下本文 下面给大家介绍Vue组件中slot的用法 主要是让组件的可扩展性更强。 1. 使用匿名slot 2. 给slot加个名字 立即学…

    2025年3月31日
    100
  • 如何使用entry component

    这次给大家带来如何使用entry component,使用entry component的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 组件是Angular中很重要的一部分,下面这篇文章就来给大家介绍关于Angular入口组件(e…

    编程技术 2025年3月31日
    100
  • 在项目中如何使用vue+props传递数据

    这次给大家带来在项目中如何使用vue+props传递数据,使用vue+props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props …

    2025年3月31日
    100

发表回复

登录后才能评论