欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年03月06日 09:20:29   作者：抹茶摩卡  
這篇文章主要介紹了解決Vue2.x父組件與子組件之間的雙向綁定問題,需要的朋友可以參考下

最近在研究如何寫一套基于Vue2.x的UI組件給自己用，提升一點BIG，在制作含有input的組件遇到一個問題：不知怎樣才能把子組件中input與調用者（父組件）的數據實現(xiàn)雙向綁定，想過使用Vuex，但觀摩了一下其他優(yōu)秀的UI框架，發(fā)現(xiàn)使用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: { 
    // 動態(tài)計算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的時候其實通過$emit觸發(fā)input事件將值傳遞給調用者的v-model，從而實現(xiàn)雙向綁定。

總結

以上所述是小編給大家介紹的解決Vue2.x父組件與子組件之間的雙向綁定問題法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

相關文章

最新評論