Vue2.0父子組件傳遞函數詳解

本文主要介紹了Vue2.0父子組件傳遞函數的教程詳解,需要的朋友可以參考下，希望能幫助到大家。

Vue.js 是什麼

Vue.js (發音 /vjuː/，類似 view) 是一套建構使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心函式庫只專注於視圖層，它不僅易於上手，還便於與第三方函式庫或既有專案整合。另一方面，當與單一檔案元件和 Vue 生態系統支援的程式庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動程式。

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

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

// 父元件.vue

<template>
 <p>
  <ok-input :params=&#39;number&#39; :callback=&#39;callbackNum&#39;></ok-input>
 </p>
</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>
 <p>
   <input v-model=&#39;numVal&#39; @change=&#39;handleFun&#39;></input>
 </p>
</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>
 <p>
  <ok-input :params=&#39;inputs&#39; @change=&#39;handleAge&#39;></ok-input>
 </p>
</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>
 <p>
   <input v-model=&#39;numVal&#39; @blur=&#39;handleChange&#39;></input>
 </p>
</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>

相關推薦：

##vue中的event bus非父子元件通信詳解

react.js 父子元件資料綁定即時通訊實例展示

抽象Vue公用元件詳解

以上是Vue2.0父子組件傳遞函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！