微信小程序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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
jquery.post用法示例代码
Jan 03 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
js+css3制作时钟特效
Oct 16 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
利用js实现简单开关灯代码
Nov 23 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
php 常用类整理
2009/12/23 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP模板解析类实例
2015/07/09 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python实现正整数分解质因数操作示例
2018/08/01 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
如何用python写个模板引擎
2021/01/14 Python
财务会计人员求职的自我评价
2014/01/13 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
春节随笔
2015/08/15 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python