解決Vue2.x父組件與子組件之間的雙向綁定問題

發(fā)布時(shí)間：2020-09-06 08:45:51 來源：腳本之家閱讀：114 作者：抹茶摩卡欄目：web開發(fā)

最近在研究如何寫一套基于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è)由父級組件傳遞過來的值 
   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父組件與子組件之間的雙向綁定問題法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

解決Vue2.x父組件與子組件之間的雙向綁定問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽