iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序自定义组件与页面的相互传参
  • 221
分享到

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

2024-04-02 19:04:59 221人浏览 八月长安
摘要

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

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

--结束END--

本文标题: 微信小程序自定义组件与页面的相互传参

本文链接: https://www.lsjlt.com/news/146429.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序自定义组件与页面的相互传参
    目录1. 自定义组件官方文档1.1 创建自定义组件1.1.1 声明组件1.1.2 编辑组件1.2 使用自定义组件1.3 页面向自定义组件传递数据(父传子)1.4 组件将事件传给页面(...
    99+
    2024-04-02
  • 微信小程序怎么自定义组件与页面的相互传参
    本篇内容介绍了“微信小程序怎么自定义组件与页面的相互传参”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. 自定义组件小程序允许我们使用自定...
    99+
    2023-06-30
  • 【微信小程序】自定义组件(二)
    🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 上文我们讲解了微信小程序自定义组件的入门知识,那么今天牛牛就来讲讲自定义组件的进阶知识吧,...
    99+
    2023-09-01
    微信小程序 小程序 前端
  • 微信小程序自定义tabbar组件
    本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 由于项目需求,必须自己写组件: 第一步:在App.json中配置tabBar,自定也组件也必...
    99+
    2024-04-02
  • 【微信小程序】自定义组件(一)
    🎁写在前面: 观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列文章又更新了呀。 今天牛牛带来的是微信小程序的自定义组件入门知识,赶紧拿起小本本做笔记呀! ...
    99+
    2023-09-05
    微信小程序 前端 小程序
  • 微信小程序用vant自定义tabbar页面并跳转相应页面
    0.前置安装 步骤一 安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用 步骤二 修改 app.json 将 app.json 中的 "style": "v2" 去...
    99+
    2023-08-16
    微信小程序 小程序
  • 微信小程序怎么自定义组件
    这篇文章主要讲解了“微信小程序怎么自定义组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么自定义组件”吧!组件模版和样式类似于页面,自定义组件拥有自己的 wxml&n...
    99+
    2023-06-26
  • 微信小程序自定义地址组件
    本文实例为大家分享了微信小程序自定义地址组件的具体代码,供大家参考,具体内容如下 项目需求 需要调用后台传过来的地址,存储地址时存的是地址的id,所以市面上的地址组件均不符合我的需求...
    99+
    2024-04-02
  • 微信小程序item怎么页面传参
    微信小程序item页面传参的案例:A页面data-id="{{item.id}}"为标记列表的下标,item.id的来源与wx:for="{{ components }}"的列表渲染bindtap=&...
    99+
    2024-04-02
  • 微信小程序中如何自定义组件
    这篇文章将为大家详细讲解有关微信小程序中如何自定义组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在微信小程序开发过程中,对于一些可能在多个页面都使用的页面模块,可以把它封装成一个组件,以提高开发效率。...
    99+
    2023-06-29
  • 微信小程序自定义组件(超详细)
    💌写在开头: 哈喽呀,亲爱的宝子们。 今天要介绍的是关于小程序自定义组件的相关内容。 主要分以下几个部分:组件的创建,组件的结构,组件的引用,组件样式,组件的生命周期等。 ...
    99+
    2023-09-09
    微信小程序 小程序 前端
  • 微信小程序如何自定义tabbar组件
    这篇文章主要讲解了“微信小程序如何自定义tabbar组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何自定义tabbar组件”吧!由于项目需求,必须自己写组件:第一步:在App...
    99+
    2023-06-14
  • 微信小程序页面如何传递参数
    微信小程序页面传递参数的示例:示例1:在对应的wxml文件中添加以下代码:<block wx:for="{{postList}}" wx:for-item="item"&nb...
    99+
    2024-04-02
  • 微信小程序自定义顶部导航组件
    本文实例为大家分享了微信小程序自定义顶部导航组件,供大家参考,具体内容如下 在components中新建文件夹navbar components/navbar.wxml <!-...
    99+
    2024-04-02
  • 微信小程序实现自定义拍摄组件
    微信小程序实现自定义摄像头(在摄像头内添加提示信息),供大家参考,具体内容如下 摄像头组件(wxml) <!-- 拍照功能 自定义摄像头           bindtap:t...
    99+
    2024-04-02
  • 微信小程序怎么自定义地址组件
    本文小编为大家详细介绍“微信小程序怎么自定义地址组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么自定义地址组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。项目需求需要调用后台传过来的地址,存储...
    99+
    2023-07-02
  • 【小程序】微信小程序自定义组件Component详细总结
    1- 前言 在本文中你将收获 小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用 2- 组件文件新建 2.1 定义组件 在根目录新建components文件夹,建立cell 文件夹,...
    99+
    2023-09-23
    微信小程序 小程序 前端 开发语言 javascript
  • 微信小程序页面与组件之间信息传递与函数调用
     这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如...
    99+
    2024-04-02
  • 微信小程序自定义波浪组件怎么用
    这篇文章主要为大家展示了“微信小程序自定义波浪组件怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序自定义波浪组件怎么用”这篇文章吧。先看看效果图:...
    99+
    2024-04-02
  • 微信小程序怎么自定义组件Component使用
    本篇内容介绍了“微信小程序怎么自定义组件Component使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1- 前言在本文中你将收获小程序...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作