這次帶給大家Vue2.0父子元件互相傳遞函數（附程式碼），Vue2.0父子元件互相傳遞函數的注意事項有哪些，下面就是實戰案例，一起來看一下。
Vue.js 是什麼
# Vue.js (讀音 /vjuː/，類似 view) 是一套建構使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心庫只專注於視圖層，它不僅易於上手，還便於與第三方函式庫或既有專案整合。另一方面，當與單一文件組件和 Vue 當生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。
學習筆記：在vue2.0中，父元件呼叫子元件時，想要將父元件中的函數體也做傳遞.
1. 透過props ：需要從子元件傳參數到父元件時適用
# // 父元件.vue
<template>
<p>
<ok-input :params='number' :callback='callbackNum'></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='numVal' @change='handleFun'></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='inputs' @change='handleAge'></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='numVal' @blur='handleChange'></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>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Vue2.0父子元件相互傳遞函數（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
