最近在研究如何寫一套基于Vue2.x的UI組件給自己用，提升一點(diǎn)BIG，在制作含有input的組件遇到一個(gè)問題：不知怎樣才能把子組件中input與調(diào)用者（父組件）的數(shù)據(jù)實(shí)現(xiàn)雙向綁定，想過使用Vuex，但觀摩了一下其他優(yōu)秀的UI框架，發(fā)現(xiàn)使用Vuex會(huì)給其他使用者造成麻煩，于是決心找到尋求解決方法，在參考了幾篇大牛們文章后，終于找到。

在這將解決方案貼出，希望能幫助到和我一樣初次接觸Vue這個(gè)框架的同行們。

子組件的代碼邏輯

<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: {    // 接收一個(gè)由父級(jí)組件傳遞過來的值    value: {     type: String,     default: function () {      return ''     }    }   },   computed:{    currentValue: {     // 動(dòng)態(tài)計(jì)算currentValue的值     get:function() {      return this.value; // 將props中的value賦值給currentValue     },     set:function(val) {      this.$emit('input', val); // 通過$emit觸發(fā)父組件     }    }   }  } </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的時(shí)候其實(shí)通過$emit觸發(fā)input事件將值傳遞給調(diào)用者的v-model，從而實(shí)現(xiàn)雙向綁定。

總結(jié)

以上所述是小編給大家介紹的解決Vue2.x父組件與子組件之間的雙向綁定問題法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！