兄弟组件通信、Publish/Subscribe模式
【实现方案】
这里介绍利用框架本身提供的事件绑定接口来模拟Publish/Subscribe模式实现兄弟组件通信的方法。
一、实现步骤及代码
1、一个、customEventInVm2(当然也可以定义Pub端如sendMsg)
<template>
<div class="tutorial-page" style="flex-direction: column;">
<text class="tutorial-title">二弟:</text>
<text>处理消息:{{msg}}</text>
<text>事件内容:{{eventDetail}}</text>
<input type="button" value="点击给大哥发送消息" onclick="sendMsg" class="input-ed"/>
</div>
</template>
<style lang="less">
.input-ed {
width: 300px;
height: 80px;
font-size: 30px;
background-color: #00bfff;
border-radius: 20px;
}
</style>
<script>
import moment from 'moment'
export default {
props: [],
data() {
return {
msg: '大家好,我是二弟',
eventDetail: '大家好,我是二弟',
}
},
sendMsg() {
if (this.previousVm) {
this.previousVm.receiveMsg('大哥,我是你二弟啊')
}
},
processMessage(msg) {
const now = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
this.msg = `${now}: ${msg}`
},
/**
* 通过events对象:绑定事件
*/
events: {
customEventInVm2(evt) {
const now = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
this.eventDetail = `${now}: ${evt.detail}`
}
}
}
</script>
2、 达到相互持有实现
<!-- 父组件 -->
<import name="comp-part2" src="./part2"></import>
<import name="comp-part3" src="./part3"></import>
<template>
<div class="tutorial-page" style="flex-direction: column;">
<!-- 兄弟VM通信 -->
<div>
<comp-part2 id="sibling1"></comp-part2>
</div>
<div style="margin-top: 30px">
<comp-part3 id="sibling2"></comp-part3>
</div>
</div>
</template>
<style lang="less">
</style>
<script>
export default {
onInit: function () {
this.$page.setTitleBar({text: '父组件', textColor: '#4a90e2', backgroundColor: '#FFFFFF', backgroundOpacity: 0.5, menu: false})
},
onReady() {
this.establishRef()
},
/**
* 建立相互VM的引用
*/
establishRef(evt) {
const siblingVm1 = this.$vm('sibling1')
const siblingVm2 = this.$vm('sibling2')
siblingVm1.parentVm = this
siblingVm1.nextVm = siblingVm2
siblingVm2.parentVm = this
siblingVm2.previousVm = siblingVm1
siblingVm1.previousVm = siblingVm2
}
}
</script>
3、 即可完成触发(当然也可以定义Sub端,如receiveMsg)
<template>
<div class="tutorial-page" style="flex-direction: column;">
<text class="tutorial-title">大哥:</text>
<text>处理消息:{{msg1}}</text>
<input type="button" value="点击给二弟发送消息" onclick="sendMesssage" class="input-dg"/>
</div>
</template>
<style lang="less">
.input-dg {
width: 300px;
height: 80px;
font-size: 30px;
background-color: #00bfff;
border-radius: 20px;
}
</style>
<script>
import moment from 'moment'
export default {
props: [],
data() {
return {
msg1: '大家好,我是大哥',
}
},
receiveMsg(msg) {
const now = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
this.msg1 = `${now}: ${msg}`
},
sendMesssage() {
if (this.previousVm) {
// Way1. 调用方法
this.previousVm.processMessage('二弟,我是你大哥啊')
// Way2. 触发事件
this.previousVm.$emit('customEventInVm2', '二弟,我是你大哥啊')
}
}
}
</script>
二、效果图展示
【参考文档】
https://doc.quickapp.cn/tutorial/framework/parent-child-component-communication.html
- 2024-01-13 记录react-dnd拖拽组件的用法
- k8s核心组件介绍
- 如何让spring扫描到自定义注解的组件
- Flutter 自定义一个右侧可滑动 左侧为按钮的组件
- 小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-13 antd的tabel组件业务问题之勾选了table中的一项,然后弹出弹窗,接着关闭弹窗,刷新table,但是table选中的一项还是显示被勾选中的状态 ==》你没有改变所选中的数据(selectedRowKeys)
- Windows 10 中,可以使用 PowerShell 添加打印和文件服务的角色功能组件,包括 Internet 打印客户端、LPD 打印服务和 LPR 端口监视器 PowerShell 添加打印机并创建新的 LPR 端口。以下是添加打印机和创建新端口的 PowerShell 命令在 Windows 10 中,可以使用 PowerShell 添加 LPR 兼容打印机。
- 组件图与部署图作业
- uni-app,微信小程序,组件样式无法穿透修改的解决办法
- antd中columns中配置的操作,如何,调用函数组件中的方法
本栏目推荐文章