小程序组件,在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. Django---Django中使用COOKIE和SESSION

    Django---Django中使用COOKIE和SESSION 一丶Cookie cookie的由来 # HTTP协议是无状态的. # 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请 ...

  2. Java打印日历表

    今天来吐槽一下Java的Calendar类的使用问题,反正我是弄了半天. 首先是,遇到一个问题,输入年份和月份,需要打印这个月的日历,网上有不少代码,但我用了几个感觉都不是很靠谱. 然后经过一番探索, ...

  3. kubernetes V1.16 Ingress-nginx部署

    Ingress 在Kubernetes中,服务和Pod的IP地址仅可以在集群网络内部使用,对于集群外的应用是不可见的.为了使外部的应用能够访问集群内的服务,在Kubernetes中可以通过NodePo ...

  4. js设置全局变量与读取全局变量

    方法1: 设置: var a = 1; 读取: a window.a window['a'] 方法2: 设置: window.b=2; 读取: b window.b window['b'] 方法3: ...

  5. 剑指前端(前端入门笔记系列)——DOM(属性节点)

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  6. Java JDBC 数据源

    数据源有2种: 普通数据源     即数据库驱动自带的数据源 连接池     包括数据库驱动自带的连接池,以及DBCP.C3P0等常用的第三方连接池. 数据库驱动自带的数据源 //从propertie ...

  7. Python 字符串常用函数

    操作字符串的常用函数 函数 描述(返回值) str.capitalize() 将字符串的第一个字符大写 str.title() 返回标题化的字符串,即每个单词的首字母都大写 str.upper() 全 ...

  8. React 之 Redux 的使用

    Redux可以简单概况为:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree .创建store的时候需要 ...

  9. SAMBA配置文件详解

    全局参数: ==================Global Settings =================== [global] config file = /usr/local/samba/ ...

  10. Dapper 一对多查询 one to many

    参考文档:Dapper one to many Table public class Person { public int Id { get; set; } public string Name { ...