vue 父子通訊, 狀態資料同步的兩種處理方式

example: 此示例是vue 專案用到ant-design-vue相關元件碰到的問題

因為a-modal元件內部有cancel事件觸發隱藏 modal 層，因而父元件傳來的控制 modal 層顯示的visible屬性就會在子元件內直接被修改 (提示報錯資訊: 不應該在父元件外修改它內部的值，因為這樣會使資料變化不可控) ；因而給出下面兩種處理方式:

方法一 : 子元件使用計算屬性變數獲取父元件傳遞過來的顯示控制值

// 父元件

="father"
>
"primary" @click=
"handleshowmodal(true)"
>顯示彈出層<
/a-button>
"showmodal" @close-modal=
"handleshowmodal"
/>
<
/div>
import soncomponent from
"./soncomponent.vue"
;export
default
,data()
},methods:}}
<
/script>

// 子元件

="son"
>
title=
"demo"
centered
v-model=
"show"
@ok=
"handleok"
@cancel=
"handlecancel"
/>
<
/div>
export
default
, computed:
,// set: function () ,
set:
function
(val)}}
, methods:
,handleok()
}}<
/script>

// 父元件

="father"
>
"primary" @click=
"handleshowmodal(true)"
>顯示彈出層<
/a-button>
"showmodal"
/>
<
/div>
import soncomponent from
"./soncomponent.vue"
;export
default
,data()
},methods:}}
<
/script>

// 子元件 a-modal 文件中有說明 visible 屬性就是控制 modal 層顯示與否的屬性

="son"
>
title=
"demo"
centered
:visible=
"modalvisible"
@ok=
"handleok"
@cancel=
"handlecancel"
/>
<
/div>
export
default
, methods:
,handleok()
}}<
/script>

data()

},computed:
,set
:function
(val)},
demo:
,set
:(val)
=>}}
,watch:
, demo:
function()
}

Vue 父子元件的通訊

準備工作 父元件 componnets template data 複製 子元件var son 父元件 componnets template this is slot 入口元件 data 複製 具名插槽 有的情況下可能需要多個插槽，則可以使用slot屬性的name屬性。var son props ...

vue父子通訊的方式

最近團隊在做 vue專案 層面上的優化。在此整理下vue父子元件通訊的方式。大綱 幾種通訊方式無外乎以下幾種 父元件 子元件 click 在子元件內 triggerclick this.emit update name newval update name其中name表示要更新的 prop 值。當然...

Vue父子元件的通訊

2 子元件傳遞父元件 在元件中使用選項props來宣告需要從父級接收到的資料。陣列中的字串就是傳遞時的名稱 v bind cmovies movies cmessage message cpn div cpn v for item in cmovies li ul div div template ...