vue2如何在嵌套組件中使用sync？

代碼如下：

嵌套組件如下：

&
&
&show&
&&
& &

&
export default{
name: "item",
props: ["modal"],
methods: {
showModal(){
this.$emit("update:modal", true );
}
}
}
&


使用組件:

&
&
&&
& &

&
export default{
components:{
Item
},
data(){
return {
is_modal_show:false
}
}
}
&


然後當嵌套的組件觸發 showModal 方法後會提示：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

Prop 不能直接用 .sync 綁定。你需要在外層的組件聲明一個 data 副本來用 .sync 綁定內部組件的 prop。當然，還要處理一下 data 和 prop 的同步。

&
&
&show&
&&
& &

&
export default{
name: "item",
props: ["modal"],
data () {
return {
localModal: this.modal
}
},
watch: {
modal (val){
this.localModal = val
},
localModal (val) {
this.$emit("update:modal", val)
}
}
}
&


我們正在開發一套基於 Vue 2 的桌面端組件庫，不過還沒有發布，你可以參考一下一些組件的寫法：ecomfe/veui

---

最近這做這樣一個需求，好像是你的寫法有點問題，應該是在父組件傳值的時候加sync 。也就是:value.sync=""

然後，子組件裡面props:[value]。接著最重要的一步，在computed 里使用

set:this.$emit("update:value", value)

get: （）=&> this.value

請忽略我的偽代碼，手機碼字不方便。如果沒有解決，我回到家給你貼代碼

---

推薦閱讀：