在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件。管理他们之间的状态就成了问题。
<强>道具双向绑定
通过同步双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多。实现方式如下
应用程序。vue文件
& lt; template>
& lt; div id=坝τ谩北?
& lt;面具:hide-mask.sync=" hideMask "祝辞& lt;/mask>
& lt;对话框:hide-dialog。同步=" hideDialog ": hide-mask.sync=癶ideMask祝辞& lt;/dialog>
& lt; dialog-icon: hide-dialog。同步=" hideDialog ": hide-mask.sync=癶ideMask祝辞& lt;/dialog-icon>
& lt;/div>
& lt;/template>
& lt; script>
从“进口面具。/组件/面罩/指数”
从’。/组件/导入对话框对话框/指数”
从“进口dialogIcon。/组件/dialog-icon/指数”
出口默认{
组件:{
面具,
对话框中,
dialogIcon
},
数据(){
返回{
hideMask:没错,
hideDialog:真
}
}
}
& lt;/script>
之前
组件/对话框/索引。vue文件
& lt; template>
& lt;部分类=岸曰翱颉?class="{“隐藏”:hideDialog}”在
& lt; div类=" dialog-close " @click=()“隐藏”在& lt;/div>
& lt;/section>
& lt;/template>
& lt; script>
出口默认{
道具:“hideDialog”、“hideMask”,
方法:{
隐藏(){
这一点。hideDialog=! this.hideDialog
这一点。hideMask=! this.hideMask
}
}
}
& lt;/script>
之前
组件/dialog-icon/索引。vue文件
& lt; template>
& lt;部分类=癲ialog-icon @click”=跋允?)”在点击出现弹窗& lt;/section>
& lt;/template>
& lt; script>
出口默认{
道具:“hideDialog”、“hideMask”,
方法:{
显示(){
这一点。hideDialog=! this.hideDialog
这一点。hideMask=! this.hideMask
}
}
}
& lt;/script>
之前
组件/面罩/索引。vue文件
& lt; template>
& lt; div类=懊婢摺?class="{“隐藏”:hideMask}”祝辞& lt;/div>
& lt;/template>
& lt; script>
出口默认{
道具(“hideMask”):
}
& lt;/script>
之前
<>强自定义事件
子组件$调度()派发事件传递给父组件,父组件广播()美元广播事件传递给子组件,这种方式虽然减少了道具的使用,但是需要额外定义几个事件,状态多了就会变得很复杂,实现方法如下
应用程序。vue文件
& lt; template>
& lt; div id=坝τ谩北?
& lt; mask> & lt;/mask>
& lt; dialog> & lt;/dialog>
& lt; dialog-icon> & lt;/dialog-icon>
& lt;/template>
& lt; script>
从“进口面具。/组件/面罩/指数”
从’。/组件/导入对话框对话框/指数”
从“进口dialogIcon。/组件/dialog-icon/指数”
出口默认{
组件:{
面具,
对话框中,
dialogIcon
},
数据(){
返回{
hideMask:没错,
hideDialog:真
}
},
事件:{
“dialog-dispatch”() {
这一点。hidedialog=! this.hidedialog
美元。广播(“dialog-broadcast”)
},
“mask-dispatch”() {
这一点。hideMask=! this.hideMask
美元。广播(“mask-broadcast”)
}
}
}
& lt;/script>
之前
组件/dialog-icon/索引。vue文件
& lt; template>
& lt;部分类=癲ialog-icon @click”=跋允?)”在点击出现弹窗& lt;/section>
& lt;/template>
& lt; script>
出口默认{
方法:{
显示(){
美元。调度(“dialog-dispatch”)
美元。调度(“mask-dispatch”)
}
},
事件:{
“dialog-broadcast”() {
这一点。hideDialog=! this.hideDialog
}
},
数据(){
返回{
hideDialog:这。parent.hideDialog美元,
hideMask: parent.hideMask美元
}
}
}
& lt;/script>
之前
组件/对话框/索引。vue文件
