微信小程序(十九)组件通信(子传父)

注释很详细,直接上代码

上一篇

新增内容:
1.定义触发事件向父组件传输数据
2.父组件绑定绑定触发事件并获取数据

源码:

myNav.wxml

<view class="navigationBar custom-class" style="padding-top: {{test}}px;">
    <view class="navigationBarTitle title-class">
        <navigator class="back" wx:if="{{back}}" open-type="navigateBack">返回</navigator>
        //定义个标题点击事件
        <view bind:tap="onTap">我是标题</view>
    </view>
</view> 

myNav.js

 /**
   * 组件的初始数据
   */
  data: {
        "test":0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onTap(){
    	/*this.triggerEvent 是一个小程序提供的方法,用于触发一个自定义事件。
    	它接受两个参数:
    	第一个参数是自定义事件的名称,
    	第二个参数是要传递给父组件的数据。*/
        this.triggerEvent('getHeight',this.data.test)
    }
  }

index.wxml

//绑定触发事件
<myNav custom-class="color-pink" bind:getHeight="getHeightFn">
</myNav>
<navigator url="/pages/form/form">点击跳转</navigator>

index.js

 getHeightFn(e){
 		//输出个弹窗
 		//小知识:icon不设为空时内容数字不能超过7个
        wx.showToast({
            icon:'none',
            title: `组件状态栏高度为:${e.detail}px`
        })
    }

效果演示:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/354719.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【GitHub项目推荐--不错的 React 开源项目】【转载】

用 React Flow 连接你的想法 用 React Flow 连接你的想法&#xff0c;这是一个高度可定制的库&#xff0c;基于 React 用于构建基于节点的 交互式 UI、编辑器、流程图和图表。 开源地址&#xff1a;https://github.com/wbkd/react-flow Bulletproof React 一个简单、可扩展且…

什么时跨域问题和如何解决跨域问题

什么是跨域问题&#xff1f;解决跨域的方案都有哪些&#xff1f;日常工作中会使用哪种解决方案&#xff1f; 跨域问题指的是不同站点之间&#xff0c;使用ajax无法互相调用的问题。跨域问题本质是浏览器的一种保护机制&#xff0c;它的初衷是为了保证用户的安全&#xff0c;防…

一道CTF签到题

点击题目的签到&#xff0c;提示&#xff1a; 看来需要修改请求的源地址&#xff1a; 上来我先尝试了我最常用的xff&#xff0c;结果不行&#xff0c;于是尝试了其他的几个常用请求头&#xff1a; 1.host头 如果后端从host取值来判断是否是本地就可以通过此方法进行绕过&…

【语录】岁月

中年 写中年&#xff0c;应该是年少励志三千里 踌躇百步无寸功&#xff0c;转眼高堂已白发 儿女蹒跚学堂中&#xff0c;不如意事常八九&#xff0c;可与人言无二三 可是诸位&#xff0c;不用悲伤&#xff0c;稻盛和夫说&#xff0c; 人生并不是一场物质的盛宴&#xff0c;而是…

面经基础版案例(路由,请求渲染,传参,组件缓存)

文章目录 1.案例效果分析2.配置一级路由&#xff08;首页&#xff0c;详情&#xff09;3.配置二级路由4.导航高亮效果5.首页的请求渲染6.传参&#xff08;查询参数 $ 动态路由&#xff09;7.详情页渲染8.组件缓存kepp-alive9.总结 1.案例效果分析 2.配置一级路由&#xff08;首…

MGRE综合实验

一&#xff1a;实验要求 二&#xff1a;实验过程 1、配置IP [r1]int g0/0/0 [r1-GigabitEthernet0/0/0]ip add 192.168.1.1 24 [r1-GigabitEthernet0/0/0]q [r1]int s4/0/0 [r1-Serial4/0/0]ip add 15.0.0.1 8 [r2]int g0/0/0 [r2-GigabitEthernet0/0/0]ip add 192.168.2.1 2…

【高效开发工具系列】Java读取Html

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

STM32 SDIO接口传输中的错误处理和中断优化技巧

在 STM32 的 SDIO 接口传输中&#xff0c;错误处理和中断优化是确保传输稳定和可靠性的重要方面。下面将介绍一些常用的错误处理和中断优化技巧&#xff0c;并给出相应的代码示例。 ✅作者简介&#xff1a;热爱科研的嵌入式开发者&#xff0c;修心和技术同步精进 ❤欢迎关注我的…

Redis 持久化详解:RDB 与 AOF 的配置、触发机制和实际测试

什么是持久化&#xff1f; 就是 Redis 将内存数据持久化到硬盘&#xff0c;避免从数据库恢复数据。之所以避免从数据库恢复数据是因为后端数据通常有性能瓶颈&#xff0c;大量数据从数据库恢复可能会给数据库造成巨大压力。 Redis 持久化通常有 RDB 和 AOF 两种方式&#xff…

VMware虚拟机部署Linux Ubuntu系统

本文介绍基于VMware Workstation Pro虚拟机软件&#xff0c;配置Linux Ubuntu操作系统环境的方法。 首先&#xff0c;我们需要进行VMware Workstation Pro虚拟机软件的下载与安装。需要注意的是&#xff0c;VMware Workstation Pro软件是一个收费软件&#xff0c;而互联网中有很…

一道CTFsql注入的问题

打开页面一个登录框&#xff0c;我甚至都没先弱口令登录&#xff0c;直接开始sql测试&#xff0c;结果测到最后发现没有&#xff0c;直接admin/admin就就去了&#xff0c;下次遇到登录框请先测试弱口令&#xff0c;ok&#xff1f; 登录成功后&#xff1a; 这句话提示中提到了…

linux(进程概念)

目录 前言&#xff1a; 正文 冯诺依曼体系结构 操作系统 &#xff08;Operator System&#xff09; 概念 目的 定位 如何理解“管理” 进程组织 基本概念 内核数据结构 代码和数据 查看进程 ps指令 top指令 父子进程 fork创建进程 小结&#xff1a; 前…

【Web】云服务器的购买与使用

目录 一、云服务器的选择 二、配置 一、云服务器的选择 腾讯云、阿里云都可以 有首次试用、学生打折啥的。 租借时间、配置都可以自行选择 二、配置 先进行重置密码、拍摄快照

HCS 华为云Stack产品组件

HCS 华为云Stack产品组件 Cloud Provisioning Service(CPS) 负责laas的云平台层的部署和升级是laas层中真正面向硬件设备&#xff0c;并将其池化软件化的部件。 Service OM 资源池(计算/存储/网络)以及基础云服务(ECS/EVS/PC)的管理工具。 ManageOne ManageOne包括服务中心…

【服务器Midjourney】创建部署Midjourney网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建MJ】 🌼1. 给服务器添加端口 🌼2. 使用Xshell连接服务器 🌼3. 安装docker 🌼4. 安装Midjourney程序 🌼5. 绑定域名+申请SSL证书 🌼6. 更新网站

python tkinter 界面开发基本结构

python tkinter 界面开发基本结构 # -*- coding:utf-8 -*- import tkinter as tkroot_window tk.Tk() # 设置窗口title root_window.title(tkinter 界面开发) # 设置窗口大小:宽x高,注,此处不能为 "*",必须使用 "x" root_window.geometry(600x500) # 更改…

C++: 内联函数

目录 概念&#xff1a; 与宏的对比&#xff1a; 函数膨胀&#xff1a; 内联函数的特性&#xff1a; 概念&#xff1a; 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函数调 用建立栈帧的开销&#xff0c;内联函数…

Git分布式版本控制工具

1、目标 了解Git基本概念 能够概述git工作流程 能够使用Git常用命令 熟悉Git代码托管服务 能够使用idea操作git 2、概述 2.1、开发中的实际场景 场景一&#xff1a;备份 小明负责的模块就要完成了&#xff0c;就在即将Release之前的一瞬间&#xff0c;电脑突然蓝屏&…

算法基础课-数据结构

单链表 题目链接&#xff1a;826. 单链表 - AcWing题库 思路&#xff1a;AcWing 826. 单链表---图解 - AcWing 需要注意的点在于理解ne[idx] head&#xff0c;idx表示当前的点&#xff0c;意思是将当前的点链到头结点的后面&#xff0c;再将头结点链在当前idx的前面。 #inc…

2024-01-24-redis4

秒杀活动 需求&#xff1a;库存中有10件商品 商品的信息自定义 同时有100个人去抢购&#xff08;这里100个人的抢购由jmeter来模拟&#xff09; jmeter的使用 在idea中将后台代码实现 package org.aaa.controller;import org.apache.commons.lang3.StringUtils; import org.sp…