認(rèn)識props

1.props是父組件傳遞給子組件的參數(shù)
2.props是只讀性的
3.props可以通過父組件傳遞給子組件自身的state的更新函數(shù)，然后子組件調(diào)用該更新函數(shù)實現(xiàn)子組件更新父組件數(shù)據(jù)
4.也可以實現(xiàn)一個類似vue中的事件系統(tǒng)，子組件調(diào)用emit發(fā)出事件并攜帶參數(shù)，父組件監(jiān)聽改事件，接受參數(shù)與完成state更新操作。

簡易事件系統(tǒng)代碼：

// eventProxy.js

const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function (key, fn) {
    if (this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }

    this.onObj[key].push(fn);
  },
  once: function (key, fn) {
    if (this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function (key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  emit: function () {
    let key, args;
    if (arguments.length === 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));

    if (this.onObj[key] !== undefined &&
      this.onObj[key].length > 0) {
      for (let i in this.onObj[key]) {
        this.onObj[key][i].apply(null, args);
      }
    }
    if (this.oneObj[key] !== undefined &&
      this.oneObj[key].length > 0) {
      for (let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

export default eventProxy;

使用方法：

import eventProxy from './eventProxy.js'
eventProxy.emit('change','參數(shù)');
eventProxy.on('change', (params) => { 
// 執(zhí)行邏輯
  console.log(params)
})