精华内容
下载资源
问答
  • React父传子、子传父
    2020-12-23 20:13:39

    父子传值

    父传子

    将子组件导入父组件并使用,在注册的子组件标签上通过自定义属性接收要传递的变量或者方法,在父组件的constructor(props)可以通过props属性接收父组件传递过来的方法

        // 子组件
        import {Component} from 'react'
        class Child extends Component {
            // 在子类中如果要使用constructor函数就必须写super关键字
            constructor(props) {
                super()
                // props里面会包含父组件传递过来的值 接收的是自定义属性和值的键值对
                console.log(props.text) // 呼哈有
            }
        }
    
      // 父组件
        import {Component} from 'react'
        import Child from '子组件的文件地址'
        class Parent extends Component {
            // 定义一个react组件 render函数时必须的
            render() {
                return (
                    // react组件的根元素不能有同胞元素
                    // 组件的首字母必须大写
                    <div>
                    
                        <Child text="呼哈有"/>
                    </div>
                )
            }
        }
    
    子传父

    通过父组件的自定义属性将父组件的方法或者函数传递给子组件,然后在子组件中调用该方法
    需要注意的是:特别注意this指向

    //父组件
    import {Component} from 'react'
    import Child from '子组件所在的文件地址'
    class Parent extends Component {
        getData = (val) => {
            console.log(val) // 就是子组件传递过来的值
        }
    
        render() {
            return (
                <div>
                    <Child func={this.getData}/>
                </div>
            )
        }
    }
    
      import {Component} from 'react'
        class Child extends Component {
            // 在子类中如果要使用constructor函数就必须写super关键字
            constructor(props) {
                super()
                // props里面会包含父组件传递过来的值 接收的是自定义属性和值的键值对
            }
            setData(val) {
                this.props.func(val)
            }
            render() {
                return (
                    <div>
                        <button onClick={this.setData.bind(this, "我要传递的数据")}>点击</button>
                        //也可以这样写
                        <button onClick={() => this.props.func("我要传递的数据")}>点击</button>
                    </div>
                )
            }
        }
    
    更多相关内容
  • Vue子传父案例

    2021-01-08 16:02:50
    //组件 const cpn ={ template:#cpn, data () { return { movies:[ {id : aaa , name : 家用电器}, {id : bbb , name : 数码宝贝}, {id : ccc , name : 硕果累累}, {id : ddd , name : 南拳北斗}, ] } ...
  • 1、组件向组件进行传值: 组件: 组件: <input type=text v-model=name> <!-- 引入组件 --> <child inputName=name></child> [removed] import child from './...
  • 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值,需要的朋友参考下吧
  • 本文实例讲述了Vue常用传值方式、父传子、子传父及非父子。分享给大家供大家参考,具体如下: 父组件向子组件传值是利用props 子组件中的注意事项:props:[‘greetMsg’],注意props后面是[]数组可以接收多个值,...
  • 主要介绍了vue子传父关于.sync与$emit的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • React组件通信(父传子,子传父) - 前端

    千次阅读 2020-04-15 18:50:38
    组件向组件传值(通过props传值) 组件: class Children extends Component{ constructor(props){ super(props); } render(){ return( <div>这是:{this.props.name}</div> // 这是 ...

    父组件向子组件传值(通过props传值)

    子组件:

    class Children extends Component{
      constructor(props){
        super(props);
      }
      render(){
        return(
          <div>这是:{this.props.name}</div> // 这是 父向子
        )
      }
    }
    

    父组件:

    class App extends React.Component{
      render(){
        return(
          <div>
            <Children name="父向子"/>
          </div>
        )
      }
    }
    

    父组件向子组件传值(回调函数)

    子组件:

    class Children extends Component{
      constructor(props){
        super(props);
      }
      handerClick(){
        this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
      }
      render(){
        return(
          <div>
            <div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor
            <button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数
          </div>
        )
      }
    }
    

    父组件:

    class Father extends Component{
      constructor(props){
        super(props)
        this.state = {
          bgcolor:'pink'
        }
      }
      bgChange(color){
        this.setState({
          bgcolor:color
        })
      }
      render(props){
        <div style={{background:this.state.bgcolor}}>
                // 给子组件传递的值 color 
          <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                            // changeColor 子组件的参数=color 当做形参
        </div>
      }
    }
    

    子组件向父组件传值

    子组件:
    handleVal函数处理用户输入的字符,再传给父组件的handelEmail函数

    var Child = React.createClass({
        handleVal: function() {
            var val = this.refs.emailDom.value;
            val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
            this.props.handleEmail(val);
        },
        render: function(){
            return (
                <div>
                    请输入邮箱:<input ref="emailDom" onChange={this.handleVal}/>
                </div>
            )
        }
    });
    

    父组件:
    通过handleEmail接受到的参数,即子组件的值

    var Parent = React.createClass({
        getInitialState: function(){
            return {
                email: ''
            }
        },
        handleEmail: function(val){
            this.setState({email: val});
        },
        render: function(){
            return (
                <div>
                    <div>用户邮箱:{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                </div>
            )
        }
    });
    React.render(
      <Parent />,
      document.getElementById('test')
    );
    

    原文章:

    展开全文
  • vue中兄弟组件传值之子传父父传子

    千次阅读 2020-03-23 23:58:00
    vue中兄弟组件传值之子传父父传子实例 对于兄弟组件的传值网络上大家一共总结了三种方法: bus.js作为中介(简单程序) 子传父父传子(简单程序) vuex(复杂程序) 由于我的项目不是特别复杂的程序,因此这次...

    vue中兄弟组件传值之子传父父传子实例

    对于兄弟组件的传值网络上大家一共总结了三种方法:

    • bus.js作为中介(简单程序)

    • 子传父父传子(简单程序)

    • vuex(复杂程序)

      由于我的项目不是特别复杂的程序,因此这次我采用了第二种也就是子传父父传子的方法。网络上的实例都有点过于简单,因此这次把我这个稍微不算那么简单的实例写出来跟大家分享。

    1、什么时候需要兄弟组件传值?

    在这里插入图片描述

    • 我们可以看到这是一个找回密码的页面,重点来看它的手机号和验证码两个组件,它两就是这个找回密码页面的兄弟组件,由于在验证码组件里边要获取一下手机号组件里边的手机号才能获取验证码,而手机号这个数据被封装在<phone-component>这个组件里边,因此这个时候就需要把手机号从phone组件传递给code组件,也就是兄弟组件的传值。
    • 子传父、父传子就是说子组件phone先把手机号传递给父组件findpassword,另一个子组件code再通过props接收父组件的数据,就可以实现兄弟组件的传值了。

    2、子传父(phone→findpassword)

    首先看子组件phone.vue
    phone子组件html:

    	  <el-input
            placeholder="请输入手机号"
            @change="setUser"
            v-model="username"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="11"
            clearable
          >
    

    phone子组件script:

    export default {
      data () {
        return {
          username: ''
        }
      },
      methods: {
        // 子传父
        setUser(){
          this.$emit('transferUser',this.username)
          // console.log(this.username)
        }
      },
     }
    
    • 这里我给手机号输入框加入了一个触发改变change事件,this.$emit('transferUser',this.username)表示让 e m i t 绑 定 了 一 个 自 定 义 事 件 t r a n s f e r U s e r , 当 这 个 这 个 语 句 被 执 行 到 的 时 候 , 就 会 将 参 数 ‘ t h i s . u s e r n a m e ‘ 传 递 给 父 组 件 f i n d p a s s w o r d , 父 组 件 通 过 @ t r a n s f e r U s e r 就 可 以 监 听 并 接 收 参 数 。 emit 绑定了一个自定义事件transferUser,当这个这个语句被执行到的时候,就会将参数`this.username`传递给父组件findpassword,父组件通过@transferUser就可以监听并接收参数。 emittransferUserthis.usernamefindpassword@transferUseremit的定义具体可以参见以下定义:

    在这里插入图片描述
    现在我们来看父组件findpassword.vue
    findpassword父组件html引入phone部分:

    <phone-component @transferUser="getUser" style="margin-top: 20px;"></phone-component>
    

    findpassword父组件script部分:

    export default {
      data () {
        return {
          phone:'',
          mintitle: '找回密码',
          newTitle: '新密码',
          newPlaceholder: '6-20字符,请设置您的新密码',
        }
      },
      methods: {   
        getUser(msg){
          this.phone=msg
          // console.log(this.phone)
        }
      },
     }
    

    这里我们给子组件加上了@transferUser,定义getUser事件,把在子组件phone里获得的数据msg(即username)传递给父组件findpassword.vue中新定义的data(phone),至此子传父结束

    3、利用props父传子(findpassword→code)

    findpassword父组件html引入code部分:

    <code-component :isphone='phone'></code-component>
    

    这里我利用v-bind给isphone绑定了刚刚子传父获得的数据phone,然后在子组件code里进行了如下操作。一定要注意这里的 isphone不能写成 isPhone,这真的是一个大坑,会导致后面子组件接收不到数据。因为在vue的中文官网有这样的说明:

    HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase(驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

    所以这里建议大家都用小写。

    code子组件部分html:

    <div class="code-input">
    <!--验证码输入框-->
        <el-input
           placeholder="验证码"
           v-model="codeNumber"
           onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
           maxlength="5"
        >
        </el-input>
    <!--验证码按钮-->
        <el-button type="primary" @click.native.prevent="SendCode" :disabled="disabled=!show">
           <span v-show="show">获取验证码</span>
           <span v-show="!show" class="count">{{count}} s</span>
        </el-button>
    </div>
    

    code子组件部分script:

    export default {
      props: {
        isphone:{
          type:String
        }
      },
      //更改倒计时时间
      data () {   
        return {
          phone:this.isphone,
          show: true,  // 初始启用按钮
          count: '',   // 初始化次数
          timer: null,
          codeNumber: '',
          isSendCode: false
        }
      },
      methods: {
        SendCode () {
          console.log(this.phone);
          //检验下输出的phone是不是输入的username
          this.isSendCode = true;
          //计时器开始
          const TIME_COUNT= 60;
          if (!this.timer) {
               this.count = TIME_COUNT;
               this.show = false;
               this.timer = setInterval(() => {
               	if (this.count > 0 && this.count <= TIME_COUNT) {
                   this.count--;
                } else {
                   this.show = true;
                   clearInterval(this.timer);  // 清除定时器
                   this.timer = null;
                  }
                }, 1000)
              };
          }
          //计时器结束
      }
    }
    

    html供大家参考,主要是script里,我用props接收了isphone,在data里重新return一个phone,用来接收isphone绑定的值,这样子就获取到父组件传过来的值啦。不信你可以在控制栏console.log(this.phone)试一试,看看是不是你输入的手机号。至此父传子结束

    展开全文
  • 2 子传父 3 非父子传值 1.父组件向子组件进行传值(父传子) 父组件: <div> <input type="text" v-model="name"> <!-- 引入子组件 --> <child :inputName="name"></child> </div...

    vue 不同组件间传值方式
    1 父传子
    2 子传父
    3 非父子传值
    1.父组件向子组件进行传值(父传子)
    父组件:

    <div>
      <input type="text" v-model="name">
      <!-- 引入子组件 -->
      <child :inputName="name"></child>
    </div>
    
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        }
      }
    </script>
    

    子组件:

    <div>
      <span>{{inputName}}</span>
    </div>
    
    <script>
      export default {
        // 接受父组件的值
        props: {
          inputName: String,
          required: true
        }
      }
    </script>
    

    2.子组件向父组件传值(子传父
    子组件:

    <div>
      <span>{{childValue}}</span>
      <!-- 定义一个子组件传值的方法 -->
      <input type="button" value="点击触发" @click="childClick">
    </div>
    
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    
    

    父组件:

    <div>
      <span>{{name}}</span>
      <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
      <child @childByValue="childByValue"></child>
    </div>
    
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue(childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    
    

    引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示

    在这里插入图片描述

    展开全文
  • vue 子传父

    千次阅读 2019-11-14 14:33:50
    子组件 ... ... this.$emit中的listenToChildEvent事件是绑定在父组件上的 父组件 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理...从而即可明白项目中的子传父传值问题: 子组件: 1. 2. 父组件 ...
  • react如何实现子传父

    千次阅读 2021-04-28 17:57:53
    我们都知道react是单向传递,所以我们碰到父传子之后还需子传父 这种情况该怎么办嘞? 这个时候我们其实可以先让父级页面传一个函数给子级页面,同时父组件的函数里面再携带一个参数,然后子级页面接收这个函数,...
  • vue组件通信:父传子—子传父

    千次阅读 2021-10-05 20:37:19
    我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频 ...父传子 1.首先想要实现组件的父子通信,那么我们第一步要先创建一个子组件,与组件绑定,那么先看以下原代码 ...
  • vue3基础 —— 子传父

    千次阅读 2021-12-24 14:38:48
    须知:vue里子组件无法改变组件的值 思路: 1. 组件定义数据 ——const data = ref(false) 2.把值传递给组件 —— :sendData = "data" 3.组件接收数据,使用、修改完成后 —— props: ["sendData"] ——...
  • vue组件通信----子传父(超级详细)

    千次阅读 2022-02-09 21:24:28
    子传父具体实现步骤 父组件通过$on监听事件,事件处理函数的参数则为接收的数据 子组件通过$emit可以触发事件, 第一个参数为要触发的事件,第二个事件为要传递的数据 sync修饰符:对一个 prop 进行双向绑定 ...
  • 子传父的思路 1.父组件通过属性传递一个回调函数。 2.子组件调用传递过来的回调函数,并将要传递的数据作为回调函数的实参。 3.父组件在回调函数中通过形参接收传递过来的数据并做相应操作。 ...
  • vue父传子 子传父 prop定义方法

    万次阅读 2019-10-27 11:22:21
    父传子 <template> //组件 引用组件aaa 两种写法传递num1,num2 <div> <aaa v-bind:father1="num1" :father2="num2"></aaa> </div> </template> <script> import ....
  • 父传子 在components里面创建组件aaaChild.vue //组件 <aaa-child :list="list" @add="add"></aaa-child> data() { return { list:[ { name:'小明', age:18 }, { name:'小红', age:...
  • 2. 子传父 3. 兄弟之间传递 1.父传子(props) 如何让子组件获取到父组件中的数据? 1. 把父组件的数据以动态属性的方式当在子组件的行间属性上; 2. 在子组件中用props这个属性接收,(对象、数组) 3. 在子组件...
  • 父传子: 先打开文件 在组件的引入Input import { Component, Input } from ‘@angular/core’; 在组件的@Componentl里面写要的数据(可以不写public) 在组件的页面引用的组件里面写要传输的 数据 组件...
  • vue3 子传父

    2021-03-30 19:34:10
  • //组件: <user-view ref="view" :dialog-visible="userViewVisible" @close="viewClose" /> methods:{ view(row) { this.$refs.view.setUser(row); this.userViewVisible = true; }, } // 组件:...
  • vue父子组件传值,父传子,子传父

    千次阅读 2019-04-12 19:56:42
    vue父子组件传值,父传子,子传父1、父组件向子组件传值1.1、父组件的代码。1.2、子组件的代码1.3、限制传递的数据类型1.4、 父组件的值变化会同步到子组件2、子组件向父组件传值2.1、$emit事件2.2、子组件代码2.3、...
  • 子传父:顾名思义子组件向父组件传值,它属于事件传值 。 我们来边看代码边注释: 先看一下,子组件 -》 注释:如图中所示,我们点击button这个按钮,触发了buttonDianji()这个事件,this.$emit() 该机制会向父...
  • 目录 一, 简单介绍组件通信 二, 详解传值方法 1.父传子 props 2.子传父 $emit 3.跨组件通信 event-bus ... 我们知道在现在的开发... 我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值 下面...
  • Vue 中 组件通信 - 子传父(自定义事件) 子传父步骤: 在子组件的 data 里面定义好 要传递的数据 在子组件的模版里面正常使用 该数据 (一般是通过一定的动作,如点击,滑动等,来自定义事件向父组件传递,...
  • 一、父传子 1.父传子通用的方法就是借助props这个属性 (1)如下图我创建了一个Dom组件,并将它...二、子传父 1、方法一(通过props和回调函数形式) (1)我在父组件创建一个方法dom通过在子组件上加入:dom='dom’的形式将
  • react函数式组件传值之子传父

    千次阅读 2021-08-10 11:03:20
    在用react进行函数式编程时,组件可以通过props向组件传值,那么组件怎么向组件传值呢?首先,组件需要向组件传递一个函数,然后,组件通过props获取函数并附上参数,最后,组件通过函数拿到组件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 154,257
精华内容 61,702
关键字:

子传父