小程序组件--> 组件传参
小程序组件,在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> < ...
随机推荐
- node-exporter常用指标含义,比如在prometheus中查询node_load1的指标数据
参考: https://blog.csdn.net/yjph83/article/details/84909319 https://www.gitbook.com/book/songjiayang/p ...
- 2019 中兴java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.中兴等公司offer,岗位是Java后端开发,因为发展原因最终选择去了中兴,入职一年时间了,也成为了面试官,之 ...
- centos7 下gcc离线安装
1.在centos安装镜像文件ios中的Packages文件夹中需找安装文件: 把需要的文件直接复制出来就行. 这里提醒的一点是,如果用命令行进入该文件夹,因为文件路径带空格,所以需要加上双引号: [ ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- JavaScript基础内容中的函数详解
函数 函数:即方法 函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值. 为什么使用函数: 1.方便调用 2.代码重用,利于维护 3.便于修改,便于重构 4.简化逻辑,利 ...
- js定时器的应用
定时器分为两种 一种是一次性的,时间到就执行 var timer=setTimeout(fun,毫秒数); 清除的方法 clearTimeout(timer) 第二种是周期性的,根据设定的时间周期进行 ...
- 牛客NOIP暑期七天营-提高组5
A:deco的abs. 水题,先%,然后相邻两个数min()一下差值. #include<bits/stdc++.h> #define ll long long using namespa ...
- django-评论
视图函数views.py # 订单评论 class OrderCommentView(View): def get(self, request, order_id): # 获取用户信息 user = ...
- springMVC(2)
SpringMVC_JSR303数据校验 1.需要加入hibernate validator验证框架 2.在springMVC配置文件中添加<mvc:annotation-driven/> ...
- 数据库 = filesystem + transcation + dsl + dslengine
数据库 = filesystem + transcation + dsl + dslParser