最近在研究如何寫一套基于Vue2.x的UI組件給自己用，提升一點BIG，在制作含有input的組件遇到一個問題：不知怎樣才能把子組件中input與調用者（父組件）的數據實現雙向綁定，想過使用Vuex，但觀摩了一下其他優秀的UI框架，發現使用Vuex會給其他使用者造成麻煩，于是決心找到尋求解決方法，在參考了幾篇大牛們文章后，終于找到。
在這將解決方案貼出，希望能幫助到和我一樣初次接觸Vue這個框架的同行們。
子組件的代碼邏輯
<template> <div class="ne-ipt"> <input type="text" v-model="currentValue"> </div> </template> <style lang="less" scoped> @import "../../assets/styles/form/form.less"; </style> <script> export default { name: 'NeIpt', props: { // 接收一個由父級組件傳遞過來的值 value: { type: String, default: function () { return '' } } }, computed:{ currentValue: { // 動態計算currentValue的值 get:function() { return this.value; // 將props中的value賦值給currentValue }, set:function(val) { this.$emit('input', val); // 通過$emit觸發父組件 } } } } </script> 父組件代碼邏輯
<template> <div id="button-index"> <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> </div> </template> <style> </style> <script> import NeIpt from './NeIpt' export default { name: 'form-index', data () { return { test: '' } }, components: { NeIpt } } </script> 在修改子組件的currentValue的時候其實通過$emit觸發input事件將值傳遞給調用者的v-model，從而實現雙向綁定。
總結
以上所述是小編給大家介紹的解決Vue2.x父組件與子組件之間的雙向綁定問題法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
