微信小程序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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
微信小程序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
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
python实现员工管理系统
2018/01/11 Python
Python File(文件) 方法整理
2019/02/18 Python
Python tkinter三种布局实例详解
2020/01/06 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
教师校本培训方案
2014/02/26 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
先进典型发言材料
2014/12/30 职场文书
大学生团员个人总结
2015/02/14 职场文书
召开会议通知范文
2015/04/15 职场文书
上帝也疯狂观后感
2015/06/09 职场文书