美文网首页
四 组件间的通讯

四 组件间的通讯

作者: 扶光_ | 来源:发表于2022-11-29 17:22 被阅读0次

组件都是独立封闭的
props主要的作用和功能就是接收传递给组件的数据,只读不能修改
传递数据都是通过属性来传递 接收都是通过props来实现

函数组件传值

//props函数组件
const App =(props)=>{
  console.log(props);
  return(
    <div>
      <h1>props {props.name}</h1>
    </div>
  )
}
 ReactDOM.render(<App name="hx" age="18"></App>,document.getElementById('root'));
函数组件通过props传值

类组件传值

//props类组件
class App extends React.Component{
  render(){
    console.log(this.props);
     return(
      <div>
        <h1>props:{this.props.name} {this.props.name}</h1>
      </div>
    )
  }
类组件

传递数组: colors={['red','green']}
传递函数: fn={()=>{console.log("哈哈哈哈")}}


相关文章

  • 四 组件间的通讯

    组件都是独立封闭的props主要的作用和功能就是接收传递给组件的数据,只读不能修改传递数据都是通过属性来传递 接收...

  • angular4学习笔记整理(四)组件间通讯、管道

    之后的笔记就写的快一点 组件间通讯 1.组件间通讯 。父组件向子组件输入属性用 子组件声明接收父组件的属性@in...

  • Vue中组件通信(eventBus)

    在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus...

  • ReactNative 组件间通讯

    参考文章参考 子组件传递参数到父组件 (回调) 在父组件中定义一个带参数的方法 price就是最后回调的参数。设置...

  • vue 组件间通讯

    总结起来三种方式 一、eventbus bus.js component1.vue component2.vue ...

  • 组件间通讯方式

      组件化,在工程组成结构角度讲,也可称为模块化。最终目的是为了解藕。  本文总结了组件间交互方式及原理,不涉及到...

  • Vue 组件间通讯

    最近回顾前端,先是 React 现在因工作需又要开始 vue 了。开发过程中多半时间我们需要结构,有层次有上下级,...

  • vue组件间通讯

    父子 $emit/on props $parent/children $attrs/listenner $ref ...

  • Vue组件间通讯

    Vue中组件通讯的方式有很多种,每一种应用的场景可能都有一些不一样,我们需要在合适的场景下选择合适的通讯方式。 父...

  • vue组件间的通讯

    父子通信: 父向子传递数据是通过 props,子向父是通过 $emit;通过 $parent / $childre...

网友评论

      本文标题:四 组件间的通讯

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