美文网首页
父子组件通信props(限定类型),自定义事件

父子组件通信props(限定类型),自定义事件

作者: 未来_竭尽全力 | 来源:发表于2017-07-22 16:46 被阅读0次

***组件自己的数据:this.state={a:'test'} 设置this.setState({a:'b'});获取this.state.a;

1:父亲给孩子传值,用到的是props我们在父组件引用子组件时,给一个自定义的属性例如 <child con='666'></child>

这个时候在子组件中可以用this.props.con来得到这个传递过来的值。

2:孩子给父亲传值,用到的是自定义事件。首先还是在父组件引用子组件的标签名上<child move={this.move.bind(this)}></child> move是父组件上的一个方法。

子组件上我们用源生事件来触发自定义事件例如onclick={this.props.move}.

3:限定父组件传过来值的类型,默认值

限制类型和是否必须传值可以用prop-types这个组件,首先我们npm安装依赖这个组件,然后在子组件中import propTypes from "prop-types";然后我们在子组件中这样配置

child.propTypes={

   context:propTypes.string.isRequired;//string限制类型,isRequired限定是否必须传值。

}

设置默认值

child.defaultProps={

context="text";

}

相关文章

  • 父子组件通信props(限定类型),自定义事件

    ***组件自己的数据:this.state={a:'test'} 设置this.setState({a:'b'})...

  • vue组件的使用

    props和$emit 组件间通讯和自定义事件 父子通讯 props $emit兄弟组件或者隔代组件使用自定义事件...

  • vue使用v-model实现父子组件间通信

    前言 vue父子组件之间的通信方式: 父组件到子组件:通过props传递数据; 子组件到父组件:通过自定义事件实现...

  • vue中的组件通信的几种方法

    1、父子通信父-->子 直接通过props即可子-->父 通过自定义事件$emit来对父组件...

  • Vue组件间通信

    Vue组件间通信 父子组间通信 通过props向子组件传值,通过事件向父级组件发送消息 通过props向子组件传值...

  • Vue:组件之间的通信

    父子组件之间的通信 1. 父组件给子组件传递数据-props 核心:通过props,给子组件添加自定义属性 2.子...

  • Vue.js数据状态管理-Vuex

    上次分享回顾 父子组件的通信 父 -> 子: props 子 -> 父: 自定义event 组件文档化 Vuex起...

  • React入门系列(六)组件间通信

    父子组件直接通信,主要靠props实现。 父组件通过props向子组件传递数据和方法 子组件触发事件,通过prop...

  • VUEX

    为什么要用vuex? 组件通信的类型 父子通信 跨级通信 兄弟通信 路由视图级别通信 通信解决方案 props/$...

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

网友评论

      本文标题:父子组件通信props(限定类型),自定义事件

      本文链接:https://www.haomeiwen.com/subject/btuukxtx.html