聲明：

事件處理的方式

當(dāng)子組件不足以處理某個事件時，事件處理有如下兩種方式：

• 將事件拋給父組件，讓其處理
  這是Vue的標(biāo)準(zhǔn)處理方式
• 調(diào)用父組件給的處理器進行處理
  這是React的標(biāo)準(zhǔn)處理方式。Vue也可以實現(xiàn)這種處理方式，但是那樣就丟掉了眾多與此相關(guān)的常用指令

拋出式處理方式（Vue示例）

• MtkInput.vue(子組件)

<template>
    <input type="text" v-on:input="$emit('input',$event.target.value)"/>
</template>

<script>
class MtkInput {
    constructor(){}
}

export default new MtkInput;
</script>

• MtkInputText.vue(父組件)

<template>
    <div>
        <p>input:{{inputContent}}</p>
        <mtk-input  v-on:input="handleInput"/>
    </div>
</template>

<script>
import MtkInput from './MtkInput.vue'

class MtkInputText {
    constructor(){
        this.data = this.dataInit
        this.components = {
            'mtk-input' : MtkInput
        }
        this.methods = {
            handleInput : this.handleInput
        }
    }

    handleInput(inputContent){ 
        this.inputContent = inputContent
    }

    dataInit(){
        return {
            inputContent : ''
        }
    }
}

export default new MtkInputText;
</script>

這里子組件MtkInput無法處理input事件，然后向父組件拋出一個input事件，并附上輸入的值，父組件MtkInputText監(jiān)聽這個事件然后調(diào)用處理器進行處理
Vue還有更加方便的v-model指令，詳情可看在組件上使用v-model

處理器式處理方式(React示例)

• MtkInput.js(子組件)

import React from 'react'

class MtkInput extends React.Component {
    constructor(props){
        super(props)
        this.onInput = this.onInput.bind(this)
    }

    onInput(e){
        this.props.onInput(e.target.value)
    }

    render() {
        return (
            <input type="text" onInput={this.onInput}></input>
        )
    }
}

export default MtkInput;

• MtkInputText.js(父組件)

import React from 'react'
import MtkInput from './MtkInput'

class MtkInputText extends React.Component {
    constructor(props){
        super(props)
        this.state = {inputContent : ''}
        this.onInputHandle = this.onInputHandle.bind(this)
    }

    onInputHandle(inputContent){
        this.setState(()=>{return {inputContent : inputContent};})
    }

    render(){
        return (
            <div>
                <p>input:{this.state.inputContent}</p>
                <MtkInput onInput={this.onInputHandle}/>
            </div>
        )
    }
}

export default MtkInputText;

這里子組件MtkInput無法處理input事件，但是父組件傳入了一個處理器，然后子組件就調(diào)用這個處理器來處理事件

參考文檔: