组件传值

最新推荐文章于 2024-06-11 19:09:38 发布
最新推荐文章于 2024-06-11 19:09:38 发布
阅读量210 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ScathachServant/article/details/80654020
版权

组件传值可以分成三类

1.父组件向子组件传递数据

2.子组件向父组件传递数据

3.非父子组件之间的数据传递


父传子

函数式组件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>
        <body>
            <div id="root"></div>
        </body>

    </html>
    <!--

        组件：组成的部件,可以接受任何props输入,并返回元素

    -->
    <script type="text/babel">

        // 创建一个父组件 
        function Parent(){
            return (
                <div>
                    <h1>这是父组件</h1>
                    {/*在父组件中嵌套子组件*/}
                    <Child name="1"></Child>
                </div>
            )
        }

        // 创建一个子组件 列表
        function Child(props){
            return (
                <div>
                    <h3>这是子组件</h3>
                    <ul>
                        <li>{props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }

        // 2. 组件的使用
        ReactDOM.render(
            <Parent></Parent>, 
            document.getElementById('root') 
        );

    </script>

类组件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root"></div>
        </body>

    </html>
    <script type="text/babel">

        // 创建一个类组件  -- 父
        class Parent extends React.Component{
            render(){
                return (
                    <div>
                        <h1>这是父组件</h1>
                        {/*在父组件中嵌套子组件*/}
                        <Child name="1"></Child>
                    </div>
                )
            }
        }


        // 创建一个类组件  -- 子
        class Child extends React.Component{
            render(){
                return (
                    <div>
                        <h3>这是子组件</h3>
                        <ul>
                            <li>{this.props.name}</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </div>
                )
            }
        }



        ReactDOM.render(
            <Parent></Parent>, 
            document.getElementById('root') 
        );

    </script>

子传父

函数式组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    function Child(props){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                        子组件：<input onChange={props.handleEmail}/>
                </div>
           )
    }

    //父组件
    function Parent() {

        return (
            <div>
                <div id='div'>父组件：{1}</div>
                <Child name="email" handleEmail={
                    function (event){
                        /*获取子组件的数据*/
                        console.log(event.target.value)

                        document.getElementById('div') = event.target.value

                    }
                }/>
            </div>
        )
    }

    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

类组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    class Child extends React.Component{

        render(){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                        子组件：<input onChange={this.props.handleEmail}/>
                </div>
            )
        }
    }

    //父组件
    class Parent extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                email:''
            }
        }
        handleEmail(event){
            this.setState({email: event.target.value});
        }



        render(){
            return (
                <div>
                    <div>父组件：{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                </div>
            )
        }
    }

    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

非父子

非父子组件传值之兄弟传值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">


    class Brother1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
          <div>
            <button onClick={this.props.refresh}>
                更新兄弟组件
            </button>
          </div>
        )
      }
    }

    class Brother2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
          <div>
             {this.props.text || "兄弟组件未更新"}
          </div>
        )
      }
    }

    class Parent extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      refresh(){
        return (e)=>{
          this.setState({
            text: "兄弟组件沟通成功",
          })
        }
      }

      render(){
        return (
          <div>
            <h2>兄弟组件沟通</h2>
            <Brother1 refresh={this.refresh()}/>
            <Brother2 text={this.state.text}/>
          </div>
        )
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('root'));

</script>

使用jquery自定义事件完成传值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://code.jquery.com/jquery.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">


    class Com1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
            <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
              $('#root').on('bus',function(e,a,b){
                console.log(a,b)
            })
      }
    }

    class Com2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
              <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
          $('#root').trigger('bus',[11,22])
      }
    }



    ReactDOM.render(
        <div>
            <Com1></Com1>
            <Com2></Com2>
        </div>,
        document.getElementById('root'));

</script>

使用原生js的方式实现组件之间的数据传递（注：只关注是否实现，不考虑兼容性问题）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://code.jquery.com/jquery.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">

    // 给dom元素绑定事件 ---- 作为中间人
    var elem = document.getElementById('root')
    var events = new Event('build');

    class Com1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }

      render(){
        return (
            <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
          // 给dom元素添加事件监听, 通过函数参数完成数据的接收
          elem.addEventListener('build', function (event) {
            console.log(event.name)
        }, false);

      }
    }

    class Com2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {
            name:'我是小高'
        }
      }

      render(){
        return (
              <div>
                <ul>
                    <li>1</li>
                </ul>
            </div>
        )
      }

      componentDidMount(){
          events.name = this.state.name
          elem.dispatchEvent(events)
      }
    }



    ReactDOM.render(
        <div>
            <Com1></Com1>
            <Com2></Com2>
        </div>,
        document.getElementById('root'));

</script>



ScathachServant
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue父子组件传值
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
react18【系列实用教程】组件 （2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“）
朝阳39的博客
05-14 871
你好;也可以写成箭头函数return 你好
React: 组件之间传值
weixin_44538672的博客
06-11 279
注意props是只读对象，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。可以传递任何值， 包括基本数据类型， 引用类型， 方法，JSX内容，嵌套在子组件中的内容（子组件会自动在名为。以下列场景为例，在App组件内部获取子组件ref, 然后调用其内部focus方法使子组件内部input聚焦。以下列场景为例，在App组件内部获取子组件ref, 然后让其内部的input元素聚焦。总结：代码很简单，主要是知识点的梳理总结。核心思想是在子组件中调用父组件中的函数并传递参数。
Vue组件传值
qq_49189784的博客
05-15 1383
Vue组件传值
angular组件传值
xxxx的博客
10-09 1420
angular组件之间的传值
react组件传值
weixin_50805397的博客
12-26 2435
1.父组件向子组件传值 方法：（通过props来传值，这种应用，很多时候我们某个组件在不同的地方用到，但是就只是内容不一样，这样在调用组件就是父组件的时候给各自自己的值就好） 父组件： import React, { Component } from 'react' import Es6cComponent from "../../company/index" export default class index extends Component { render() { ..
【Vue】子组件父组件传值+刷新子组件
慕白Lee的博客
10-16 3万+
如果你使用Vuex进行状态管理，可以在父组件中提交一个mutation或action来改变状态，然后在子组件中使用计算属性或watcher来响应状态的变化，从而刷新数据。绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。绑定事件处理函数时，不能携带括号！你可以通过改变子组件的`key`属性来强制重新渲染子组件。父组件可以发出一个事件，子组件在`created`或`mounted`钩子中监听这个事件来执行刷新操作。
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
夜空孤狼啸的博客
03-18 1470
react中父子组件传值
父子组件传值
mygoes
07-24 1731
父子组件那些事一. 组件的封装二. 组件的传值props | 父传子ref 一. 组件的封装 封装： <template> <div class="helloWorld">HelloWorld</div> </template> <script> export default { // 命名 name: "HelloWorld", } </script> <style> </styl
vue3组件传值方法
零-J
01-12 6922
提示：vue3组件传值学习
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父...
react 组件传值的三种方法
10-16
主要介绍了react 组件传值的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue组件通信中非父子组件传值知识点总结
10-15
总结来说，理解非父子组件传值的关键在于掌握事件总线的使用。通过创建一个独立的Vue实例作为事件总线，组件可以触发和监听自定义事件，以此达到数据的传递。这种方法简单易用，但不适用于大型应用，因为随着组件...
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值