微信小程序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 相关文章推荐
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
laypage分页控件使用实例详解
May 19 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
python删除某个字符
2018/03/19 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python属于解释型语言么
2020/06/15 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
采购员岗位职责
2013/11/15 职场文书
应聘会计求职信
2014/06/11 职场文书
办理房产过户的委托书
2014/09/14 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
大学军训口号大全
2015/12/24 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
python turtle绘图
2022/05/04 Python