學習筆記：在vue2.0中，父元件呼叫子元件時，想要將父元件中的函式體也做傳遞

1. 通過props ：需要從子元件傳引數到父元件時適用

// 父元件.vue

<template>
  <div>
    <ok-input :params='number' :callback='callbackNum'></ok-input>
  </div>
</template>
<script type="text/ecmascript-6">
  import okInput from '../ok-input/okinput.vue'
 
;
  export default {
    props: {},
    data() {
      return {
        number: {},
        callbackNum: function (x) {
          console.log(x);
        }
      };
    },
    methods: {
    },
    components: {
      'ok-input': okInput
    }
  };
</script>

// 子元件.vue
<template>
  <div
 
>
      <input v-model='numVal' @change='handleFun'></input>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Input, Select, Option, Button} from 'element-ui';
  import 'element-ui/lib/theme-default/index.css';
  export default {
    props: {
      params: {
        type: Object
 
,
        default: {
          type: ''
        }
      },
      callback: {}
    },
    data() {
      return {
        x: 'hah',    
        numVal: ''
      };
    },
    methods: {
      handleFun(val) {
          this.callback(val); // 將引數傳回父元件中的回撥函式
      }
    },
    components: {
      'el-input': Input,
    }
  };
</script>

2.通過$emit： 只需獲得當前操作物件時適用

// 父元件.vue

<template>
  <div>
    <ok-input :params='inputs' @change='handleAge'></ok-input>
  </div>
</template>
<script type="text/ecmascript-6">
  import okInput from '../ok-input/okinput.vue';
  export default {
    props: {},
    data() {
      return {
        number: {}
      };
    },
    methods: {
      handleAge(evt) {
        console.log(evt.target.value); // 接收從子元件傳過來的當前物件
      }
    },
    components: {
      'ok-input': okInput
    }
  };
</script>

// 子元件.vue
<template>
  <div>
      <input v-model='numVal' @blur='handleChange'></input>
  </div>
</template>
<script type="text/ecmascript-6">
  import {Input, Select, Option, Button} from 'element-ui';
  import 'element-ui/lib/theme-default/index.css';
  export default {
    props: {
      params: {
        type: Object,
        default: {
          type: ''
        }
      },
      callback: {}
    },
    data() {
      return {
        x: 'hah',    
        numVal: ''
      };
    },
    methods: {
      handleChange(evt) {
        this.$emit('change', evt); // 將當前物件 evt 傳遞到父元件
      },
    },
    components: {
      'el-input': Input,
    }
  };
</script>

我自己的總結，不知道理解的是不是對，希望得到大家的批評建議。