【微信小程序】父子组件之间传值

news2025/1/29 14:01:29

微信小程序父子组件之间传值有两种:

1.父组件向子组件传值

2.子组件向父组件传值


区别:

  1. 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值。
  2. 子向父传值使用的是自定义事件,父组件通过自定义事件中的事件对象e来接收子组件传递过来的值。

父组件向子组件传值

1.1 在父组件的.json文件中导入子组件

  "usingComponents": {
    "childpart":"/components/childpart/childpart",
  }

1.2 在子组件的.json文件中,把自己定义为子组件

{
 "component": true,
}

2. 1  在父组件的wxml中,子组件进行引用:

        给组件起的自定义名字是 childpart ,渲染的时候 在父组件里写上一组 <childpart></childpart> 标签,就可以把子组件渲染到父组件。

2.2  我们在父组件.js文件的数据data 中定义两个数据,nameValue:'lizi', ageValue:18

 data: {
      nameValue:"lizi",
      ageValue:18
    },

2.3  在父组件的wxml文件中把这个数据传递给子组件 childpart。绑定属性值( name,age),并传递想要给子组件的值( nameValue,ageValue)

<childpart name="{{nameValue}}" age="{{ageValue}}"></childpart>

3.  在子组件中的js中使用 properties 获取值,这样就可以在子组件中用获取到这个值了

 // 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:''
    },
    age:{
      type:Number,
      value:''
    }
  },

4. 可以在子组件的wxml页面中引用看看是否传递成功了 

父组件页面显示如下:


子组件向父组件传值

1. 先在子组件childpart.js的data 数据中 定义一个数据 msg:

 data: {
    msg:'我是子组件的值'
  },

2.  在子组件wxml 中放一个按钮,并绑定一个事件 sendMsg

<!-- 点击按钮向父组件传值 -->
<button bindtap="sendMsg">点击按钮向父组件传值</button>

3. 在childpart.js中定义一下这个sendMsg ,并传值: 

 methods: {
    sendMsg(){
      this.triggerEvent('sendMsg',this.data.msg)
    }
  },

4. 传值使用的是 this.triggerEvent() ,sendMsg 就是传递给父组件的自定义事件名称,然后在父组件中绑定一下这个事件bindsendMsg="sendMsg"

<childpart name="{{nameValue}}" age="{{ageValue}}" bindsendMsg="sendMsg"></childpart>

5.在父组件的 js 文件中定义sendMsg方法,并传递事件对象 e

 // 父组件接受子组件传递过来的值
  sendMsg(e){
    console.log(e.detail);
  },

子组件传递过来的值使用 e.detail就可以获取到了 
 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VUE 学习笔记(一)开发环境搭建

1、Visual Studio Code安装及使用 下载地址官网&#xff1a;https://code.visualstudio.com/ 直接点击下载按钮即可&#xff0c;会根据系统自动下载合适的版本&#xff0c;无需自行选择。 2、VSCode 上安装&#xff1a;JavaScript Debugger 目前 Debugger for Chrome 已经处…

基于html+css的盒子内容旋转

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

【目标检测论文阅读笔记】Reducing Label Noise in Anchor-Free Object Detection

&#xff08;Augmentation for small object detection&#xff09; Abstract 当前的 anchor-free无锚目标检测器 将空间上落在真值框预定义中心区域内的所有特征标记为正。这种方法会在训练过程中产生 标签噪声&#xff0c;因为这些 正标记的特征中的一些 可能位于背景或遮挡…

2023最新8个电脑必装软件,新电脑装完好用又高效

新买的笔记本电脑到手了&#xff0c;需要安装什么软件&#xff1f;不会真的有人这样问吧&#xff0c;万一真的有人不知道需要安装什么软件呢&#xff1f;好吧&#xff0c;提醒一下各位&#xff0c;新电脑不要乱安装软件啊&#xff0c;不然电脑很容易中病毒的。根据我多次换电脑…

MyBatis配置文件 —— 相关标签详解

目录 一、Mybatis配置文件 — properties标签 二、Mybatis配置文件 — settings标签 三、Mybatis配置文件 — plugins标签 四、Mybatis配置文件 — typeAliases标签 五、Mybatis配置文件 — environments标签 六、Mybatis配置文件 — mappers标签 一、Mybatis配置文件 —…

burp抓包https链接不安全解决方法

在浏览器已经导入Burpsuite的证书之后,抓包,浏览器仍然显示抓取https包提示不是私密链接解决方法 适用于没有继续访问的按钮。 方法一: 浏览器输入 chrome://flags 搜索 Allow invalid certificates for resources loaded from localhost.翻译过来就是 允许从本地主机加载资…

2023 年十大目标检测模型!

2023 年十大目标检测模型&#xff01; 使用深度学习革新对象检测的综合指南。 对象检测示例 “目标检测是计算机视觉中最令人兴奋和最具挑战性的问题之一&#xff0c;而深度学习已成为解决它的强大工具。” 对象检测是计算机视觉中的一项基本任务&#xff0c;涉及识别和定位…

SpringBoot与RabbitMQ 集成以及死信队列,TTL,延迟队列

简单示例 项目结构依赖配置生产者消费者 消息的可靠投递示例 confirmreturn 消费者确认机制消费端限流TTL 单条消息整个队列设置 TTL 死信队列 死信队列的实现步骤 延迟队列消息幂等设计 简单示例 项目结构 依赖 <dependencies><dependency><groupId>org.…

【Linux 裸机篇(一)】ARM Cortex-A 架构基础、汇编基础

目录一、ARM Cortex-A 架构基础1. Cortex-A 处理器运行模型2. Cortex-A 寄存器组2.1 通用寄存器2.1.1 未备份寄存器2.1.2 备份寄存器2.1.3 程序计数器 R152.2 程序状态寄存器二、ARM 汇编基础1. GNU 汇编语法1.1 语句1.2 段1.3 伪操作1.4 函数2. 常用汇编指令2.1 处理器内部数据…

你的订婚|结婚纪念日是质数吗?进来测算看看……

今年开年以来&#xff0c;随着ChatGPT的爆火&#xff0c;原本一直平静的三六零安全科技股份有限公司&#xff08;下称360&#xff09;股价仅2月以来涨幅就达到近200%。然而4月4日晚间&#xff0c;360发布公告称&#xff0c;公司董事长周鸿祎与妻子胡欢离婚。有意思的是&#xf…

【Java版oj】day25星际密码、数根

目录 一、洗牌 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 二、数根 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 一、洗牌 &#xff08;1&…

过度的焦虑 到底有多糟

你们知道过度的焦虑到底有多糟糕吗&#xff1f; 现在生活节奏越来越快&#xff0c;不管是生活、工作还是学习&#xff0c;很多方面都给我们带来了很多的压力问题&#xff0c;我们所承受的负担越来越重&#xff0c;很多人时常处于一种非常疲劳、过度的焦虑的状态。 你们知道过度…

什么是Node.js

文章目录什么是Node.js简介常用命令Node内置模块Node.js和JavaScript的区别什么是Node.js 简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它允许开发者使用JavaScript编写服务器端代码&#xff0c;而不仅仅是浏览器端的代码。Node.js的出现使得JavaScript可以在…

Vue环境下安装Less|Sass|Stylus(详细指南)

Vue_Cli环境下如何使用less、sass、stylus&#xff1f;报错如何解决&#xff1f; 安装Less 依次使用以下npm执行命令即可完后less的安装 npm install lessnpm install less-loader在vue组件style中使用less <style lang"less"></style>安装Sass(三者之…

如何抓住ChatGPT的热潮,打造小红书爆款

如何抓住ChatGPT的热潮&#xff0c;打造小红书爆款 前两周我看到一个小红书才申请了没多久就已经有好几万的粉丝&#xff0c;于是我让我老婆也赶紧注册一个&#xff0c;毕竟小红书也有着不错的用户群体 那么我们如何通过GPT辅助我们快速创作呢&#xff1f;先来看下ChatGPT的回答…

《离散数学导学》精炼——第6,7章(类型集合论,谓词逻辑)

引言 笔者一直觉得在计算机这一学科的学习中&#xff0c;离散数学是极为重要的知识基础。离散化的思想体现在计算机学科的方方面面。举例来说&#xff0c;“像素”这一概念是我们日常生活中耳熟能详的&#xff0c;将一个图片拆分成一个个极微小的像素&#xff0c;就是利用了离…

[1] 顺序表实现

一、引入顺序表 提出问题&#xff1a; 顺序表底层是一个数组&#xff0c;为什么不是直接操作数组就好了&#xff0c;还要单独写一个类&#xff0c;说底层是数组呢&#xff1f;&#xff1f; 因为顺序表可以有更多的操作&#xff1a; 比如一个数组&#xff0c;我们没有办法知…

Android 11.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(二)

1.前言 在11.0的系统rom定制化开发中,在原生系统SystemUI下拉状态栏的下拉通知栏的背景默认是白色四角的背景, 由于在产品设计中,在对下拉通知栏通知的背景需要把四角背景默认改成圆角背景,所以就需要分析系统原生下拉通知栏的每条通知的默认背景, 然后通过systemui的通知…

MobTech 秒验|极速验证,拉新无忧

一、运营拓展新用户的难题 运营拓展新用户是每个应用都需要面对的问题&#xff0c;但是在实际操作中&#xff0c;往往会遇到一些困难。其中一个主要的难题就是注册和登录的繁琐性。用户在使用一个新的应用时&#xff0c;通常需要填写手机号、获取验证码、输入验证码等步骤&…

Java-红黑树的实现

目录一、概述二、红黑树的操作1. 变色2. 左旋与右旋3. 插入节点4. 删除节点三、手写代码1. 通用方法2. 中序遍历3. 左旋4. 右旋5. 添加节点6. 删除节点四、完整代码五、测试1. 红黑树打印类2. 测试代码3. 测试结果一、概述 关于红黑树的学习&#xff0c;先推荐给大家一个网址&…