微信小程序APP页面的之间的相互传递参数以及自定义组件


Posted in Javascript onApril 19, 2022

1. 自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

官方文档

自定义组件

是不是用的微信的组件感觉很爽啊,如果不够用怎么办?

1.1 创建自定义组件

类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成

1.1.1 声明组件

首先需要在json文件中进行自定义组件声明

{
  "component": true
}

微信小程序APP页面的之间的相互传递参数以及自定义组件

1.1.2 编辑组件

同时,还要在wxml文件中编写组件模板,在wxss文件中加入组件样式

注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

<!--componentes/com/com.wxml-->
<view>我是组件</view>
<button>按钮组件{{num}}</button>

微信小程序APP页面的之间的相互传递参数以及自定义组件

1.2 使用自定义组件

首先要在页面的json文件中进行引用声明。还要提供对应的组件名和组件路径

注册-->使用

# json文件中注册
{
    // 引用声明
  "usingComponents": {
    // 要使用的组件的名称     // 组件的路径
    "com": "/componentes/com/com"
  }
}
# wxml文件中使用
<!--pages/test1/test1.wxml-->
<com></com>

微信小程序APP页面的之间的相互传递参数以及自定义组件

1.3 页面向自定义组件传递数据(父传子)

注意点:  

1.properties中:是写其他页面传过来的变量 

2.data中:本页面的变量,属性

# 组件wxml文件
<!--componentes/com/com.wxml-->
<!-- name值是由页面决定的 -->
<view>{{name}}大帅逼</view>  
# 组件js文件
// componentes/com/com.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      type: String,	//属性的类型
      value: 'jeff'  // 属性的默认值,如果页面没有给这个name赋值,就使用这个value的值
    } 
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
#页面中wxml
<my-con  title="{{变量名}}"><my-con/>
 #再组件中
   properties: {
    title:{
      type:String,
      value:"你好"
    }
  }
# 页面wsml文件
<com name='chary'></com>  //可以是固定值
<com name = "{{name1}}"></com> //这里的可以是变量

1.4 组件将事件传给页面(子传父)

组件的方法methods里面

# 组件wxml文件
<button bind:tap="click">加一</button>
# 组件js文件
methods: {
    click:function(e){
      this.triggerEvent("jia1")  // 传递jia1事件,不带参数的
      # this.triggerEvent("jia1",{num:e.currentTarget.dataset.num})  //带参数的
    }
  }
# 页面wxml文件 捕获事件
<view>{{num}}</view>
<com bind:jia1="jia"></com>
# 页面js文件
// pages/test1/test1.js
Page({
  data: {
    num:0
  },
  jia:function(e){
    this.setData({
      num: this.data.num + 1
  })
  }
})

以上就是微信小程序自定义组件与页面的相互传参的详细内容!

Javascript 相关文章推荐
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
微信小程序APP的生命周期及页面的生命周期
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
You might like
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
经典的毕业生自荐信范文
2014/04/14 职场文书
地球一小时宣传标语
2014/06/24 职场文书
中学生打架检讨书
2014/10/13 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python基础之函数的定义和调用
2021/10/24 Python
Python学习之包与模块详解
2022/03/19 Python
索尼ICF-5900W收音机测评
2022/04/24 无线电