微信小程序组件与页面互相传值
微信小程序组件与页面互相传值
- 1.外界对组件内部传值（父传子）
- 组件properties属性的应用
- ① 定义组件内部要接受外部的值
- ② 定义页面要传输给组件内部的值
- ③ 传输数据
- ④ 组件内部对properties内值的调用
- 2. 组件内部对外界传值（子传父）
- 自定义事件
- ① 在组件method列表内`定义并且触发一个自定义事件`
- ② 在外部页面的wxml中引用组件的地方用bind：绑定自定义事件
- ③ 在外部页面的js文件中创建方法获取到组件传递的数据
1.外界对组件内部传值（父传子）
组件properties属性的应用
① 定义组件内部要接受外部的值
在组件的js文件中（这里我定义了一个number类型的proID，还有一个数组segmentItems）
properties: {proID:{type:Number, //type：作用是指明proID这个值的类型value:99 //默认值}，segmentItems:{type:Array,value:[]}},
② 定义页面要传输给组件内部的值
在使用组件的页面的js文件中定义好要传递的数据（这里的projectId就是我要传到组件的proID）
data: {projectId:111},
③ 传输数据
在页面的wxml中引用组件的地方用以下方式传输即可
<cjn_projectUpLoad proID="{{projectId}}"/>
④ 组件内部对properties内值的调用
这里不赘述，properties的使用是和data一样的。
this.setData({ })也适用于properties。
2. 组件内部对外界传值（子传父）
自定义事件
① 在组件method列表内定义并且触发一个自定义事件
{% asset_img image-20210808203036651.png 图片说明 %}
② 在外部页面的wxml中引用组件的地方用bind：绑定自定义事件
bind:pushFilePath="_getFilePath"
{% asset_img image-20210808203252153.png 图片说明 %}
③ 在外部页面的js文件中创建方法获取到组件传递的数据
_getFilePath: function (evt) {this.setData({filePath:evt.detail.filePath})
微信小程序组件与页面互相传值相关推荐
- 微信小程序 组件与页面的传参、方法调用（二）
微信小程序 组件与页面的传参.方法调用 使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了 首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
- 微信小程序组件所在页面的生命周期
一 什么是组件所在页面的生命周期 有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期. 例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 ...
- 微信小程序两个页面跳转，传值
微信小程序两个页面跳转,传值 在小程序界面,需要点击后跳转界面并且传递一个值. 具体实现如下:首先在wxml界面需要绑定事件,绑定需要传的值 a.wxml `<view bindtap=&quo ...
- 微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
- 微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- 微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现 父组件: <template><view cla ...
- 微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式 一.背景 众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
- 【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件 微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念 什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
最新文章
- matlab pup,matlab利用bar函数画不同颜色直方图
- App开放接口api安全：Token签名sign的设计与实现
- Smarty vs Twig: 性能对比
- AccEAP架构介绍（1）－－－实体的设计
- docker 批量删除 镜像或容器 删除所有容器
- c++面向对象高级编程 学习十三 数量不定的模板参数，auto，for
- 的driver_Spark源码解析（三）----Driver启动、注册Application
- 用户画像之门店用户类型的体系
- 什么是分布式系统，如何学习分布式系统
- 自定义控件的构建(6)
- UE4打包并加载Pak-Windows/iOS/Android不同平台Editor/Runtime不同运行模式兼容
- [Linux]基于网络编程的智能机器小伴侣
- Java学习笔记-全栈-web开发-01-HTML基础总览
- 2019仿笔趣阁小说网站源码(PC版+手机版+APP+采集器+教程)下载
- 基于uniapp开发的一款Android、iOS上使用的小说阅读app
- epub编辑器apk_使用您喜欢HTML编辑器编辑ePub电子书
- c语言 sin1怎么写,c语言sin30怎么写
- 简：webservice服务端及客户端开发
- Markov Chain Monte Carlo
- https://wwe.lanzouj.com/i9KEQ00qfjmd