专栏首页FinGet前端之路Vue 与 React 父子组件之间的家长里短

Vue 与 React 父子组件之间的家长里短

Vue

// father.js
<template>
  <div id="father">
      这是父组件:
      <p>父组件</p>
      <Child ref="child" :msg="msg" @click="faClick"></Child>
  </div>
</template>

<script>
import Child from './child';
export default {
  data() {
    return {
      msg: '父组件传给子组件' // 传递给子组件的值
    };
  },
  components: {
    Child
  },
  methods: {
    faClick(msg) { // msg 子组件传递给父组件的值
      alert(msg);
    },
    childSayHello() { // 父组件调用子组件的方法
      this.$refs,child.sayHello();
    }
  }
}
</script>
// child.js
<template>
  <div id="child">
      这是子组件:<p>父组件传递的值:{{msg}}</p>
      <button @click="click">接收父组件方法</button>
  </div>
</template>

<script>
export default {
  props: ['msg'],
  data() {
    return {
      childMsg : '哈哈哈'
    };
  },
  methods: {
    click() {
      this.$emit('click',this.childMsg); // 第一个参数为派发的事件名, 第二个参数为传递的值
    },
    sayHello() {
      alert('I am child!');
    }
  }
}
</script>

父组件向子组件传值:

  1. 在父组件中引入并注册子组件
  2. 在子组件中定义 props:['msg'] (不能省略引号)
  3. 通过 :msg="msg" 的方法传递变量,也可以通过 msg="msg" 传递字符串

父组件调用子组件的方法:

  1. 在父组件中给子组件绑定一个 ref="xxx" 属性
  2. 通过 this.$refs.xxx.方法 调用

子组件向父组件传值:

  1. 在子组件中定义一个方法
  2. 通过 this.$emit('事件名','参数') 派发一个事件,并传递参数
  3. 父组件中通过 @事件名 的方式监听事件
  4. 父组件中定一个一个方法,该方法的参数对应子组件传递过来的参数

子组件调用父组件的方法:

子组件可以通过this.$parent.xxx 直接调用父组件的方法。

通过子组件派发的事件,不仅可以向父组件传递参数,父组件也可以通过传递的参数,改变向子组件传递的值,从而改变子组件。

props 还可以进行一系列的格式校验,更多内容查看官网

props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

React

// father.js
import React, { Component } from 'react'

import Child from './child.js';

class Father extends Component {
  constructor(props) {
    super(props);
    this.state = {
      con: '父组件给子组件'
    }
  }
  // 传递给子组件的方法,并接收子组件实例,绑定在this.child上
  onRef = (ref) => {
    this.child = ref
  }
  // 通过this.child 就可以直接调用子组件的内部方法
  click = () => {
    this.child.sayHello();
  }
  // 传递个子组件的方法
  faClick = (msg) => {
    alert(msg);
  }
  render() {
    return (
      <div>
        <p>这是父组件</p>
        <button onClick={this.click}>调用子组件方法</button>
        <div>
          这是子组件
          <Child onRef={this.onRef} connect={this.state.con} click={(msg) => this.faClick(msg)}/>
        </div>
      </div>
    )
  }
}

export default Father;
// child.js
import React, { Component } from 'react'

class Child extends Component {
  constructor(props) {
    super(props);
  }
  // 调用父组件传递的方法,并传递子组件实例
  componentDidMount(){
    this.props.onRef(this);
  }
  // 调用父组件传递的方法
  click= ()=> {
    this.props.click('哈啊哈');
  }
  // 子组件内部方法
  sayHello = () => {
    alert('I am child');
  }
  render() {
    return (
      <div>
         <p>{this.props.connect}</p>
         <button onClick={this.click}>接收父组件的方法</button>
      </div>
    )
  }
}

export default Child;

父组件向子组件传值:

  1. 在父组件中引入子组件
  2. 通过 connect={this.state.con} 方式可以传递值
  3. 子组件通过 this.props.connect 接收

父组件调用子组件的方法:

  1. 给子组件传递一个方法 onRef={this.onRef}
  2. 子组件在 componentDidMount 生命周期里 调用这个方法,并回传自身实例
  3. 父组在该方法中接收子组件实例,并挂载在父组件实例属性上,例:this.child = ref
  4. 最后就可以通过 this.child.xxx 直接调用子组件方法

子组件向父组件传参:

  1. 在父组件中给子组件传递一个方法,click={(msg) => this.faClick(msg)}
  2. 在子组件中通过一个事件接收这个方法,onClick={this.click}
  3. 通过click= ()=> {this.props.click('哈啊哈');} 从而传递参数

子组件调用父组件方法

  1. 父组件可以直接传递一个方法给子组件
  2. 子组件可以通过 this.props.xxx 调用

不能直接通过 <button onClick={this.props.click('哈啊哈')}>接收父组件的方法</button> 进行传参,这样在组件初始化时,事件就执行了。

Vue 与 React 的不同:

  1. React 的子组件中不用定义父组件传值对应的变量
  2. React 的子组件不用派发事件,父组件可以直接传递方法
  3. 子组件通过this.props.click 可以调用父组件传递的方法,并传参最后

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 全家桶,深入Vue 的世界

    可以看到text值的变化是0 5 10 15 … 而并没有出现 0 1 2 3 … 这样连续的变化

    FinGet
  • 归纳总结this的指向问题

    7.函数调用时如果绑定了bind,那么函数中的this指向了bind中绑定的元素

    FinGet
  • hexo + GitHub

    在最后找到Github pages(我的是默认开启的,如果你不是就点击Launch automatic page generator按钮,一直下一步就行了)

    FinGet
  • Vue 3 提供与注入

    通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这...

    公众号---人生代码
  • React学习(最终篇)—— 高阶应用:高阶组件(HOCs)

    高阶组件(higher-order components:以下简称HOC或HOC组件)是一个React组件复用的高级技巧。HOCs本身并不是React的API接...

    随风溜达的向日葵
  • vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

    蓓蕾心晴
  • React数据流和组件间的通信总结

    首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

    前朝楚水
  • 腾讯Android研发岗必刷真题:说下组件之间的跳转和组件通信原理机制

    今天则会从更小细粒度入手,主要讲讲在组件化架构下组件与组件之间通信机制是如何、包括所谓的UI跳转,其实也是组件化通信,只不过它稍微特殊点,单独抽取出来而已。学习...

    Android技术干货分享
  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

    蓓蕾心晴
  • 可视化搭建平台的地图组件和日历组件方案选型

    可视化搭建平台除了需要为用户提供简单便捷的操作方式之外, 还需要提供丰富的组件支持和组件扩展, 这样才能满足更多用户的业务需求.

    徐小夕

扫码关注云+社区

领取腾讯云代金券