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

來源：懂視網責編：小采時間：2020-11-27 22:27:49

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

Vue2.0父子組件傳遞函數的教程詳解:Vue.js 是什么 Vue.js (讀音 /vjuː/，類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue2.0父子組件傳遞函數的教程詳解:Vue.js 是什么 Vue.js (讀音 /vjuː/，類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組

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父子組件傳遞函數的教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com