首页 > 其他分享 >【快应用】快应用学习之兄弟组件通信

【快应用】快应用学习之兄弟组件通信

时间:2023-11-21 11:36:32浏览次数:38  
标签:const siblingVm2 通信 msg moment 应用 组件 now previousVm

​【关键词】

兄弟组件通信、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>

二、效果图展示

cke_17412.pngcke_21993.png

 

【参考文档】

https://doc.quickapp.cn/tutorial/framework/parent-child-component-communication.html

标签:const,siblingVm2,通信,msg,moment,应用,组件,now,previousVm
From: https://www.cnblogs.com/mayism123/p/17846213.html

相关文章

  • 【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器
    ​【关键字】HarmonyOS、低代码平台、Tabs、TabContent、页签导航 1、写在前面前面几篇分别介绍了低代码平台中的堆叠容器、滚动容器、网格布局等三种容器的使用,实际开发中我们经常会有这样的需求,页面底部是三个Tab按钮点击时会分别切换不同的视图内容,本篇我们就来介绍低代码......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之列表
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、列表、列表项 1、写在前面我们在日常开发中使用最多的组件可能就是列表组件了,现在几乎所有的应用都离不开列表,那么今天我们就来介绍一下如何利用低代码平台来实现列表的展示,列表实际上也是容器的一种,需要注意的是,列表是需要结......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之常用基础组件(上)
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、常用基础组件、基础容器 1、写在前面之前是花了一些时间介绍了在低代码平台中滚动容器、网格布局、页签容器、列表这几种容器的拖拽技巧及使用方法,今天我会继续来介绍咱们在应用开发中可能会经常用到的一些基础容器和基础组件,......
  • 深度学习在图像识别中的革命性应用
    深度学习在图像识别中的革命性应用标志着计算机视觉领域的重大进步。以下是深度学习在图像识别方面的一些革命性应用:1.**卷积神经网络(CNN)的崭新时代**:  -CNN是深度学习在图像识别中的核心技术,通过卷积层、池化层和全连接层,模拟人类视觉系统。这一技术的引入使得图像识别的......
  • vue3 ts 父子 组件小例子
    <project-tabref="projectTabRef"v-model="form.projectVO":data="parentToChild"@update="updateHandler"></project-tab>//引用组件constProjectTab=defineAsyncComponent(()=>import('./tabsProject.......
  • 解锁数据库运维秘籍:掌握AntDB-T动态共享内存,提升进程间通信效率
    动态共享内存是AntDB数据库通信的重要手段,本文主要阐述AntDB-T数据库动态共享内存的实现原理、实现方式与使用方法。AntDB-T数据库是一款企业级通用分布式关系型数据库,其数据库内核是基于进程模型实现的,因此进程间通信(IPC)是实现分布式架构间进行任务协作和数据共享的关键。实现进......
  • Linux中execl函数详解与日常应用!
    Linux中execl函数详解与日常应用execl是Linux系统中的一个系统调用,用于执行指定路径下的可执行文件。本文将详细介绍execl函数的使用方法和参数含义,并探讨其在日常开发中的常见应用场景和注意事项。1.execl函数概述execl函数属于Linux系统调用之一,其原型为:intexecl(constc......
  • 界面控件DevExpress WPF流程图组件,完美复制Visio UI!(一)
    DevExpressWPFDiagram(流程图)控件帮助用户完美复制MicrosoftVisioUI,并将信息丰富且组织良好的图表、流程图和组织图轻松合并到您的下一个WPF项目中。P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着......
  • 解放VSCode+Vue的完整组件库智能提示(包括ant-design-vue、element-plus等)
    解放VSCode+Vue的完整组件库智能提示最近因为一些原因从WebStrom转回VSCode,首先感受到的就是组件库没有智能提示了:这能忍吗?根本不可能!接下来,我带你花三分钟找回遗失的智能提示~首先,本篇文章适用于通过unplugin-vue-components自动引入组件的项目;也就是说,在你的vite.config.js......
  • 获取App Store线上应用版本信息
    热烈欢迎,请直接点击!!!进入博主AppStore主页,下载使用各个作品!!!注:博主将坚持每月上线一个新app!!【 注意:中国大陆区用/cn/,如果是其他地区,请把链接改成对应的地区代码。】1、通过AppID:AppStore搜索对应的应用,点击右上角分享按钮,点击拷贝链接,复制到浏览器中,最后的显示的就是十位idh......