小程序组件--> 组件传参
小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件
如果多个地方需要使用到,可以在app.json中加入一下代码,相当于vue的全局组件。
"usingComponents": {
"btn": "/components/文件夹名/js文件名"
}
如果单独引用,直接在引用的json文件中
"usingComponents": {
"btn": "/components/文件夹名/js文件名",
}
如果是想用page里面的一个页面作为组件 只需要将他改为和component 格式一样即可 (在page里面写了,又突然觉得需要作为组件,可以用这个方法直接将整个文件丢进components) 一定要注意改造一下
需要注意的是小程序组件有自己的生命周期,文档
参考大佬链接 https://www.jianshu.com/p/7f366aba54c3
组件之间传参数 感觉和vue有一丢丢相似
父传子
父组件中写 传过去的值。传过去了之后呢,就直接他娘的 this.data.name 就拿到父组件传过去的值了 例如
父组件 当然这个name 是需要在父组件中的data里面定义的
<view>
<btn name='{{name}}'></btn>
</view>
子组件
Component({
//vue里面是props(缩写),这里是全称。用来接收父组件传过来的东西
properties: {
name: {
type: String,//类型
value: 'xxx'//默认值
}
},
data: { }
})
子传父 咱先在子组件中 搞点事儿
子组件中搞de事儿
Component({
//vue里面是props(缩写),这里是全称。用来接收父组件传过来的东西
properties: {
name: {
type: String,//类型
value: 'xxx'//默认值
}
},
data: { },
methods:{
giveFarther(){
this.triggerEvent('giveFarther', { xixi: "666传值成功" }); //这里giveFarther就是事件名,后面带着的就是传过去值
}
}
})
<view>
<btn name='{{name}}' bind:giveFarther="getSonName"></btn> //这里 就是在组件中绑定了一个子组件的事件名 giveFarther 随后在js中写
</view> 想象下面是JS文件哈 giveFarther(ev){
console.log(ev) //打印看看
}
随附大佬链接 :https://www.jianshu.com/p/ea830fe470fa
小程序组件--> 组件传参的更多相关文章
- 微信小程序页面返回传参的问题
比如提交问题,然后需要返回之前页面,由于onLoad只会加载一次,所以不会触发,但是我们页面又需要刷新,那怎么办? 1.onLoad与onShow区别 onLoad:监听页面加载.一个页面只会调用一次 ...
- 微信小程序跳转传参参数丢失?
垂死病中惊坐起,笑问 Bug 何处来?! 1.先是大写字母作祟 前两天发布了「柒留言」v2.0.0 新版本,结果...你懂的嘛,没有 Bug 的程序不是好程序,写不出 Bug 的程序员不是好程序员. ...
- 微信小程序wx.switchTab传参问题
业务背景:从提问跳到列表需要刷新,以显示刚提交的数据. 但是官方文档 wx.switchTab 明确指明路径后是不能带参数的,怎么办? 网上有很多解决方案是:switchTab成功跳转后调用succe ...
- 微信小程序~跳页传参
[1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...
- 微信小程序之页面传参
效果图: 点击编辑值传过去了,那么编辑支出类型这个界面又是如何获取到值呢? 传值代码: type.js editType: function (e) { var typeId = e.currentT ...
- 微信小程序 wx.navigateTo()传参及多个参数方法
var workModeAndPriceList = res.data.data.workModeAndPriceList; //var result = JSON.stringify(workMod ...
- 小程序跳转传参参数值为url时参数丢失
通过先encodeURIComponent,取到值以后再decodeURIComponent,拼接参数正常传递 A页面 switch: function (e) { var aa = 'UNNZVUf ...
- 从零开发一款自己的小程序UI组件库(一)
写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...
- 从零开发一款自己的小程序UI组件库(二)
写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(bu ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
随机推荐
- Unity PhysicsScene测试
应该是unity 2018.3中加入的功能,对象可以放置于不同的物理场景中. 一个Scene对应一个物理场景(PhysicsScene),若想放入独立的物理场景测试创建一个Scene即可.见下图gif ...
- Spring Security实现OAuth2.0授权服务 - 基础版
一.OAuth2.0协议 1.OAuth2.0概述 OAuth2.0是一个关于授权的开放网络协议. 该协议在第三方应用与服务提供平台之间设置了一个授权层.第三方应用需要服务资源时,并不是直接使用用户帐 ...
- 利用Properties属性集结合类加载器读取配置文件
配置文件test.properties a=123 测试类Demo1.java public class Demo1 { public static void main(String[] args) ...
- 使用 Go 语言徒手撸一个负载均衡器
负载均衡器在 Web 架构中扮演着非常重要的角色,被用于为多个后端分发流量负载,提升服务的伸缩性.负载均衡器后面配置了多个服务,在某个服务发生故障时,负载均衡器可以很快地选择另一个可用的服务,所以整体 ...
- 【JVM】CMS垃圾回收器
一.简介 Concurrent Mark Sweep,是一种以获取最短回收停顿时间为目标的收集器,尤其重视服务的响应速度. CMS是老年代垃圾回收器,基于标记-清除算法实现.新生代默认使用ParNew ...
- Leetcode 297. Serialize and Deserialize Binary Tree
https://leetcode.com/problems/serialize-and-deserialize-binary-tree/ Serialization is the process of ...
- JavaScript API 与 DOM
一.API 1.API 的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供引用程序与开发人员基于某软件或硬件得以访问 ...
- WDA演练一:用户登陆界面设计(二)
一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...
- ML-求解 SVM 的SMO 算法
这算是我真正意义上认真去读的第一篇ML论文了, but, 我还是很多地方没有搞懂, 想想, 缓缓吧, 还是先熟练调用API 哈哈 原论文地址: https://www.microsoft.com/en ...
- 【漏洞复现】Apache Solr via Velocity template远程代码执行
0x01 概述 Solr简介 Apache Solr 是一个开源的企业级搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr ...