wx小程序自定义组件与页面之间参数传递
在开发中,很多页面中会使用相同的组件,这时可以将具有相同信息的部分封装成一个组件,方便开发中调用。在调用中可能会涉及到数据的传递问题,例如页面与组件,组件与组件直接的数据传递。
首先看看页面与组件直接的数据传递。
1. 组件需要获取页面传递数据, 可以使用组件的属性来传递值
2. 页面需要获取组件中修改的数据, 可以使用组件中的事件触发页面中定义的事件来获取
第一、组件获取页面中数据
先创建一个自定义组件test-component
<!--components/test-component/test-component.wxml-->
<view>
<input class='new-name' placeholder='请输入名字' bindinput="bindInputFunc" value='{{inputValue}}'></input>
<button class='btn' size='mini' bind:tap='search'>搜索</button> <view>搜索记录:</view>
<block wx:for='{{records}}' wx:for-index="index" wx:for-item="record">
<view class='record'>{{record}}</view>
</block>
</view>
第一、在组件test-component.js中定义一个属性
// components/test-component/test-component.js
Component({
/**
* 组件的属性列表
*/
properties: {
namesData: {
type:Array,
value:[],
observer: function (newVal, oldVal, changedPath) {
// 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
console.log(newVal);
console.log(oldVal);
this.setData({records:newVal})
}
}
}, /**
* 组件的初始数据
*/
data: {
inputValue:'',
records: []
}, /**
* 组件的方法列表
*/
methods: {
//输入框输入事件
bindInputFunc: function (e) {
this.setData({
inputValue: e.detail.value
})
}, /**
* 组件搜索按钮事件
*/
search: function() {
let records = [...this.data.records];
records.push(this.data.inputValue); this.setData({ records, inputValue: '' }) this.triggerEvent("search", { records}); /*
var myEventDetail = {} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption) 触发事件的选项包括:
选项名 类型 是否必填 默认值 描述
bubbles Boolean 否 false 事件是否冒泡
composed Boolean 否 false 事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部
capturePhase Boolean 否 false 事件是否拥有捕获阶段 */ }
}
})
第二、创建一个home页面,引用自定义组件test-component,就是在home.json中增加一个组件的引用
<test-component namesData='{{names}}' bind:search='homeSearch'></test-component>
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
names:['aaaa','bbbb','cccc']
},
/**
* 搜索的点击事件
*/
homeSearch: function(e) {
console.log(e.detail); // 自定义组件触发事件时提供的detail对象
} })
wx小程序自定义组件与页面之间参数传递的更多相关文章
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- 微信小程序自定义组件实现
官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面 ...
- 如何在小程序自定义组件和动态传入数据小demo
在开发过程中,我们会将页面常用功能抽象为一个组件,这样既方便又可以避免代码冗余.小程序中也提供了自定义组件,了解Vue的伙伴们会发现其实和Vue的组件化很相似.这里用返回顶部功能来说说如何自定义组件, ...
- 微信小程序自定义组件-下拉框
这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件 知识点:组件,animation,获取当前点击元 ...
- 微信小程序自定义组件
要做自定义组件,我们先定一个小目标,比如说我们在小程序中实现一下 WEUI 中的弹窗组件,基本效果图如下. Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建 ...
- 【微信小程序】mpvue中页面之间传值(全网唯一真正可行的方法,中指推了一下隐形眼镜)
摘要: mpvue中页面之间传值(注意:是页面之间,不是组件之间) 场景:A页面跳转B页面,在B页面选择商品,将商品名带回A页面并显示 使用api: getCurrentPages step1: A页 ...
- wx小程序获取组件属性数据data-prop
在微信小程序中有时会在组件上定义一些属性,使用data-来定义 <view data-idvalue="id" data-Index-Name="IndexName ...
- 微信小程序自定义组件封装及父子间组件传值
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogra ...
随机推荐
- Centos7下的systemctl命令与service和chkconfig
博主使用的操作系统是最新的CentOS 7,所以可能和网上一些老的博文有一定出入,那是因为版本更新的原因. 这里写图片描述1 service service命令用于对系统服务进行管理,比如启动(sta ...
- npm rebuild node-sass
在使用npm安装node-sass的时候,可能会出现如下的报错: Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code ...
- (error) MOVED 5798 172.17.0.3:6379
登录没有启动集群模式(即缺少了那个"-c"): redis-cli -c -h yourhost -p yourpost
- Java基础知识_毕向东_Java基础视频教程笔记(26 反射)
Java反射机制: 是在运行状态中,对于任意一个类(class)文件,都能够知道这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性.这种动态获取的信息以及动态调用对象的方法的功 ...
- 使用dtc把dtb的反编译为dts
sudo apt-get install device-tree-compiler dtc -I dtb -O dts msm8976-v1.1-qrd.dtb > msm8976-v1.1-q ...
- Webbrowser指定IE内核版本(更改注册表)
如果电脑上安装了IE8或者之后版本的IE浏览器,Webbrowser控件会使用IE7兼容模式来显示网页内容.解决方法是在注册表中为你的进程指定引用IE的版本号. 比如我的程序叫做a.exe 对于32位 ...
- (转).Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?
原文地址:http://www.cnblogs.com/1996V/p/7798111.html 示例一和示例二,主要是来讲解 TransactionScope 是什么,为什么要用Transactio ...
- MySQL也真是让人郁闷(关于子查询中使用limit)
在MySQL4.1中子查询是不能使用LIMIT的,手册中也明确指明 “This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY ...
- Java - 20 Java 继承
Java 继承 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类.继承可以理解为一个对象从另一个对象获取属性的过程. 如果类A是类B的父类,而类B是类C的父类,我们也称C是A的子 ...
- vue使用树形控件z-tree,动态添加数据,默认展开第一行
环境:vue 2.9.3; webpack; 插件:z-tree,jquery(cnpm install xxxx) 问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集 ...