Vue 與 React 父子組件之間的家長裏短

時間 2021-04-02

標籤 javascript html vue java react git github 數組 ide 函數欄目 React 简体版

原文原文鏈接

原文博客地址： https://finget.github.io/2018/06/08/vue-react-props/

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>

父組件向子組件傳值：

在父組件中引入並註冊子組件
在子組件中定義 props:['msg'] (不能省略引號)
經過 :msg="msg" 的方法傳遞變量，也能夠經過 msg="msg" 傳遞字符串

父組件調用子組件的方法：

在父組件中給子組件綁定一個 ref="xxx" 屬性
經過 this.$refs.xxx.方法 調用

子組件向父組件傳值：

在子組件中定義一個方法
經過 this.$emit('事件名','參數') 派發一個事件，並傳遞參數
父組件中經過 @事件名 的方式監聽事件
父組件中定一個一個方法，該方法的參數對應子組件傳遞過來的參數

子組件調用父組件的方法：

子組件能夠經過this.$parent.xxx 直接調用父組件的方法。javascript

經過子組件派發的事件，不只能夠向父組件傳遞參數，父組件也能夠經過傳遞的參數，改變向子組件傳遞的值，從而改變子組件。

props 還能夠進行一系列的格式校驗，更多內容查看官網html

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;