网站 被 抄袭,公司网站建设工作总结,wordpress访问量,深建工程集团有限公司【关键词】
兄弟组件通信、Publish/Subscribe模式 【实现方案】
这里介绍利用框架本身提供的事件绑定接口来模拟Publish/Subscribe模式实现兄弟组件通信的方法。
一、实现步骤及代码
1、一个子组件定义Sub 端的逻辑处理#xff0c;有processMessage、customEventInVm2有processMessage、customEventInVm2当然也可以定义Pub端如sendMsg
templatediv classtutorial-page styleflex-direction: column;text classtutorial-title二弟:/texttext处理消息{{msg}}/texttext事件内容{{eventDetail}}/textinput typebutton value点击给大哥发送消息 onclicksendMsg classinput-ed//div
/templatestyle langless.input-ed {width: 300px;height: 80px;font-size: 30px;background-color: #00bfff;border-radius: 20px;}
/stylescriptimport moment from momentexport 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、 兄弟组件可以通过父组件中建立相互引用达到相互持有的ViewModel目的通过在生命周期onReady中执行establishRef实现
!-- 父组件 --
import namecomp-part2 src./part2/import
import namecomp-part3 src./part3/importtemplatediv classtutorial-page styleflex-direction: column;!-- 兄弟VM通信 --divcomp-part2 idsibling1/comp-part2/divdiv stylemargin-top: 30pxcomp-part3 idsibling2/comp-part3/div/div
/templatestyle langless
/stylescriptexport 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 thissiblingVm1.nextVm siblingVm2siblingVm2.parentVm thissiblingVm2.previousVm siblingVm1siblingVm1.previousVm siblingVm2}}
/script
3、 另外一个子组件定义Pub 端执行sendMessage即可完成触发当然也可以定义Sub端如receiveMsg
templatediv classtutorial-page styleflex-direction: column;text classtutorial-title大哥:/texttext处理消息{{msg1}}/textinput typebutton value点击给二弟发送消息 onclicksendMesssage classinput-dg//div
/templatestyle langless.input-dg {width: 300px;height: 80px;font-size: 30px;background-color: #00bfff;border-radius: 20px;}
/stylescriptimport moment from momentexport 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
