這次帶給大家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中文網其他相關文章!