溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue.js 是什么
Vue.js (讀音 /vjuː/，類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
學習筆記：在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>
總結
以上所述是小編給大家介紹的Vue2.0父子組件傳遞函數的教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
