小程序组件,在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

小程序组件--> 组件传参的更多相关文章

  1. 微信小程序页面返回传参的问题

    比如提交问题,然后需要返回之前页面,由于onLoad只会加载一次,所以不会触发,但是我们页面又需要刷新,那怎么办? 1.onLoad与onShow区别 onLoad:监听页面加载.一个页面只会调用一次 ...

  2. 微信小程序跳转传参参数丢失?

    垂死病中惊坐起,笑问 Bug 何处来?! 1.先是大写字母作祟 前两天发布了「柒留言」v2.0.0 新版本,结果...你懂的嘛,没有 Bug 的程序不是好程序,写不出 Bug 的程序员不是好程序员. ...

  3. 微信小程序wx.switchTab传参问题

    业务背景:从提问跳到列表需要刷新,以显示刚提交的数据. 但是官方文档 wx.switchTab 明确指明路径后是不能带参数的,怎么办? 网上有很多解决方案是:switchTab成功跳转后调用succe ...

  4. 微信小程序~跳页传参

    [1]需求: 点击商品,跳到相应商品详情页面 [2]代码: (1)商品列表页 <view class="goodsList"> <view wx:for=&quo ...

  5. 微信小程序之页面传参

    效果图: 点击编辑值传过去了,那么编辑支出类型这个界面又是如何获取到值呢? 传值代码: type.js editType: function (e) { var typeId = e.currentT ...

  6. 微信小程序 wx.navigateTo()传参及多个参数方法

    var workModeAndPriceList = res.data.data.workModeAndPriceList; //var result = JSON.stringify(workMod ...

  7. 小程序跳转传参参数值为url时参数丢失

    通过先encodeURIComponent,取到值以后再decodeURIComponent,拼接参数正常传递 A页面 switch: function (e) { var aa = 'UNNZVUf ...

  8. 从零开发一款自己的小程序UI组件库(一)

    写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...

  9. 从零开发一款自己的小程序UI组件库(二)

    写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(bu ...

  10. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

随机推荐

  1. Celery在Django中的使用介绍

    Celery在Django中的使用介绍 Celery简介 celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,并且提供维护这样一个系统的必须工具. 它是一个专注于实时处理的任务队列,同时也 ...

  2. chrome截屏的方法

    原文本文链接:https://blog.csdn.net/xiaofengzhiyu/article/details/94652057 Chrome保存整个网页为图片保存为图片右键检查快捷键Ctrl+ ...

  3. Node.js 中 exports 和 module.exports 的区别

    每一个模块中都有一个 module 对象, module 对象中有一个 exports 对象 我们可以把需要导出的成员都放到 module.exports 这个接口对象中,也就是 module.exp ...

  4. Android 系统自带图片裁剪功能(适配7.0、8.0、对了还有小米手机)

    前段时间写了如何获取相册和拍照之后的照片并且进行显示和上传,这一次是如何进行圆形图像制作,经常看我写的笔记的人会知道,我很懒.那么我就懒的自定义了,目前需求就用原生的就好了,大神的轮子,我会在后面进行 ...

  5. 在页面获取本地电脑IP

    <%@ page language="java" import="java.util.*" contentType="text/html; ch ...

  6. Solr基础理论【倒排索引,模糊查询】

    一.简介 现有的许多不同类型 的技术系统,如关系型数据库.键值存储.操作磁盘文件的map-reduce[映射-规约]引擎.图数据库等,都是为了帮助用户解决颇具挑战性的数据存储与检索问题而设计的.而搜索 ...

  7. flask建表遇到的错误: flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specified key was too long; max key length is 767 bytes')

    error:flask,sqlalchemy.exc.OperationalError: (MySQLdb._exceptions.OperationalError) (1071, 'Specifie ...

  8. google批量搜索实现方式

    本文主要记录一下最近所做的关于Google批量搜索的实现方式. 搜索目的: 获取关键词在某个域名下对应的Google搜索结果数 搜索方式: 关键词+inurl 例如:"爬虫" in ...

  9. PAT 乙级 1003.我要通过! C++/Java

    1003 我要通过! (20 分) 题目来源 “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则 ...

  10. PAT 乙级 1008.数组元素循环右移问题 C++/Java

    1008 数组元素循环右移问题 (20 分) 题目来源 一个数组A中存有N(>)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥)个位置,即将A中的数据由(A​0​​A​1​​⋯ ...