微信小程序自定义组件与页面的相互传参

目录
  • 1. 自定义组件
    • 官方文档
    • 1.1 创建自定义组件
      • 1.1.1 声明组件
      • 1.1.2 编辑组件
    • 1.2 使用自定义组件
    • 1.3 页面向自定义组件传递数据(父传子)
    • 1.4 组件将事件传给页面(子传父)

1. 自定义组件

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

官方文档

自定义组件

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

1.1 创建自定义组件

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

1.1.1 声明组件

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

{
  "component": true
}

1.1.2 编辑组件

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

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

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

1.2 使用自定义组件

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

注册-->使用

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

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
  })
  }
})

以上就是微信小程序自定义组件与页面的相互传参的详细内容，更多关于微信小程序自定义组件页面传参的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 微信小程序中多个页面传参通信的学习与实践

    前言 微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码.在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好.在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题. 业务分析 此类需求大概意思是:A页面进入B页面,B页面返回并传值给A. 探索之路 刚开始我想采用一个比较偷懒的

  • 微信小程序 页面传参实例详解

    微信小程序 页面传参实例详解

    微信小程序 页面传参 微信小程序的传参,页面跳转,页面之间传递参数在开发APP应用的时候会经常用到这样的功能,这里就用微信小程序来实现,大家可以看下如何实现,如有错误,请指正. 先上demo图: 为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,但是代码很简单.直接上代码. <span style="font-size:24px;"><!--index.wxml--> <view class

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 微信小程序新手入门之自定义组件的使用

    微信小程序新手入门之自定义组件的使用

    前言 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护. 一.小程序的好处和特点 1.好处 开发者:小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换:也能节约开发和推广成本. 用户:能够节约使用时间成本和手机内存空间.对于开发者

  • 微信小程序使用自定义组件导航实现当前页面高亮

    最近开发小程序,需要做一个导航,导航可以通过template写出来,但是这个项目需要在导航中处理一些逻辑,做成组件更方便些. 首先新建header文件夹,里面新建对应的js.json.wxml.wxss文件. <!-- 公共头部组件 --> <view class='headers'> <navigator open-type="redirectTo" class='logo' url="../index/index" hover-cl

  • 微信小程序自定义组件与页面的相互传参

    微信小程序自定义组件与页面的相互传参

    目录 1. 自定义组件 官方文档 1.1 创建自定义组件 1.1.1 声明组件 1.1.2 编辑组件 1.2 使用自定义组件 1.3 页面向自定义组件传递数据(父传子) 1.4 组件将事件传给页面(子传父) 1. 自定义组件 小程序允许我们使用自定义组件的方式来构建页面. 官方文档 自定义组件 是不是用的微信的组件感觉很爽啊,如果不够用怎么办? 1.1 创建自定义组件 类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成 1.1.1 声明组件 首先需要在json文件中进行自定义组

  • 微信小程序自定义组件传值 页面和组件相互传数据操作示例

    本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作.分享给大家供大家参考,具体如下: 要想在组件中调到页面中的方法,并且想要组件中传数据到页面去,emmmm,可以酱紫: 用组件事件 triggerEvent! 首先,在页面中定义组件 ,json文件中记得加上: { "usingComponents": { "user-btn": "/pages/component/userInfo/userInfo" } }, 然后,index.w

  • 微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

    首先我们在pages文件夹下创建components目录用于存放自定义组件.如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件. 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步. 一.首先把dialog组件的样式写好,并在index页面相应的位置引用.以下就是代码啦(分别为:wxml.wxss.js.json) <view class='wx_dialog_

  • 详解微信小程序自定义组件的实现及数据交互

    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件 首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建 在callphone.w

  • 微信小程序自定义组件之可清除的input组件

    最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件. 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏:当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容.并且还可以设置输入框整体样式以及输入框左侧图标. 明确了需求之后,就可以开始着手实现了. 首先,在目标目录下新建一个自定义组件 建好之后,我们需要来设计布局.根据需求来看,我们只需要三个组件:两个image和一个input.

  • 微信小程序自定义组件components(代码详解)

    在写小程序代码的时候,我们发现经常有一段代码我们经常敲,经常使用某一自定义组件,例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码:微信小程序里的弹窗提示可以使用在多个地方- 小程序自定义组件 找到components目录,没有就新建 在compoents目录里新建一个用于存放代码的目录(下面用g-swiper表示) 在g-swiper目录里新建Compoent(名字自取),新建后会和新建Page时一样自动生成四个页面文件(g-swiper.wxml g-swiper.wxss g-s

  • 一步步教你实现微信小程序自定义组件

    一步步教你实现微信小程序自定义组件

    目录 前言 组件的声明与使用 组件通信 方法一 WXML 数据绑定 方法二 事件 方法三 selectComponent 获取组件实例对象 方法四 url 参数通信 参数过长怎么办?路由 api 不支持携带参数呢? 方法五 EventChannel 事件派发通信 会出现数据无法监听的情况吗? 使用自定义的事件中心 EventBus 小结 附:组件和页面的区别 总结 前言 在微信小程序开发过程中,对于一些可能在多个页面都使用的页面模块,可以把它封装成一个组件,以提高开发效率.虽然说我们可以引入整个

  • 微信小程序自定义组件实现单选功能

    微信小程序自定义组件实现单选功能

    本文实例为大家分享了微信小程序自定义组件实现单选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catchtap="showSinger">   单选按钮   <singer id="singer" bind:singerCancel="_singerCancel" bind:singerConfirm="_singerConfirm" si

  • 微信小程序自定义组件实现多选功能

    微信小程序自定义组件实现多选功能

    本文实例为大家分享了微信小程序自定义组件实现多选的具体代码,供大家参考,具体内容如下 效果图: 调用部分(例如在index页面) index.wxml <view catchtap="showMultiple">   多选按钮   <multiple id="multiple" bind:multipleCancel="_multipleCancel" bind:multipleConfirm="_multipleCo

  • 微信小程序自定义组件实现环形进度条

    微信小程序自定义组件实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva

随机推荐