問題描述有這樣一個(gè)簡(jiǎn)單的需求: 頁面有一個(gè)按鈕, 點(diǎn)擊會(huì)有一個(gè)彈窗, 彈窗上有個(gè)關(guān)閉按鈕, 點(diǎn)擊可以關(guān)閉這個(gè)彈窗用vue的組件來做大約是這樣的<component-parent>
<component-child>
....我是內(nèi)容.... <button>點(diǎn)我關(guān)閉</button>
</component-child>
<button>點(diǎn)我打開</button></component-parent>問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法我的實(shí)現(xiàn)方式是這樣的:打開操作(父組件操作):show(){
this.isShow = true
.....做其他的事情....
}hide(){
this.isShow = false
}關(guān)閉操作(子組件操作):this.$parent.hide()這樣做能實(shí)現(xiàn)功能, 但是就是不太優(yōu)雅, 因?yàn)檫@樣父組件必須實(shí)現(xiàn)子組件調(diào)用的方法/屬性, 耦合會(huì)很高emit我也想過, 但我覺得這樣更不好
2 回答
撒科打諢
TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊
sync 修飾符了解一下。
<component-child :visible.sync="isShow"></component-child>
// 子組件內(nèi)的關(guān)閉方法handleClose() { this.$emit('update:visible', false);
}
交互式愛情
TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊
<component-child @cancel=cancel></component-child>
父組件中定義cancel函數(shù)
添加回答
舉報(bào)
0/150
提交
取消