在項目中開始使用vue2來構建項目了，跟 vue1 很大的一處不同在于2 取消了props 的雙向綁定，改成只能從父級傳到子級的單向數據流，初衷當然是好的，為了避免雙向綁定在項目中容易造成的數據混亂。

解決方案一

然后開始參考網上和github上的方案等等，發現很多解決方案是這樣的

用data對象中創建一個props屬性的副本

watch props屬性 賦予data副本 來同步組件外對props的修改

watch data副本，emit一個函數 通知到組件外

這里以最常見的 modal為例子：
modal挺合適雙向綁定的，外部可以控制組件的 顯示或者隱藏，組件內部的關閉可以控制 visible屬性隱藏，同時visible 屬性同步傳輸到外部

///modal.vue 組件 <template><div class="modal" v-show="visible"><div class="close" @click="cancel">X</div></div> </template><script> export default {name:'modal',props: {value: {type: Boolean,default:false}},data () {return {visible:false}},watch:{value(val) {console.log(val);this.visible = val;},visible(val) {this.$emit("visible-change",val);}},methods:{cancel(){this.visible = false;}},mounted() {if (this.value) {this.visible = true;}} } </script>///調用modal組件 <modal :value="isShow" @visible-change="modalVisibleChange"></modal>export default {name: 'app',data () {return {isShow:true,}},methods:{modalVisibleChange(val){this.isShow = val;}} }

這樣就解決了 組件props 雙向綁定的問題。 但是這樣有一個不是太美觀的現象就是 在父級調用 modal組件的時候，還需要寫一個 modalVisibleChange 的methods. 總是顯得這部分代碼是多余的。 特別是寫一個讓別人用的公共組件，這樣調用太麻煩了。
能不能不寫method來實現props的雙向綁定呢，答案是可以的。

優美解決方案

那就是利用 v-model, 然后使用value來保存v-model的值，進行雙向綁定

改成如下代碼：

<template><div class="modal" :value="value" v-show="visible"><div class="close" @click="cancel">X</div></div> </template><script> export default {props: {value: {type: Boolean,default:false}},data () {return {visible:false}},watch:{value(val) {console.log(val);this.visible = val;},visible(val) {this.$emit('input', val);}},methods:{cancel(){this.visible = false;}},mounted() {if (this.value) {this.visible = true;}} } </script>///調用modal組件<modal v-model="isShow"></modal>export default {name: 'app',data () {return {isShow:false}} } </script>

這樣調用組件的代碼是不是很簡潔，其他人員要調用的話，會很輕松，只要設置 isShow 就可以控制 modal 組件的顯示或者隱藏，同時 如果是modal 組件內部關閉按鈕關閉的，狀態也會傳到 isShow

總結

以上是生活随笔為你收集整理的Vue2 利用 v-model 实现组件props双向绑定的优美解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。