微信小程序组件传值图示过程详解

2024-07-29 08:48:39

A是父组件，B是子组件

父传子

<!-- 父组件A wxml -->
<view>
 <componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>

//父组件Ajson （里面不能有注释）

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
  "componentB": "../../components/son/son"
 }
}

//父组件A js
// view/father/father.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  paramAtoB: "我是A向B传值"
 }
})

<!-- 子组件B wxml -->
<view class="inner">
 {{paramAtoB}}
</view>

//子组件B js
Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
  paramAtoB: {
   type: String,//类型
   value: 'default value'//默认值
  }
 },
 data: {
 }
})

//子组件B json

{
 "component": true,
 "usingComponents": {}
}

效果

子传父

<!-- 父组件A wxml -->
<view>
 <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB>
 {{ paramBtoA }}
</view>

// view/father/father.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  paramAtoB: "我是A向B传值",
  paramBtoA: 1122
 },
 onMyEvent: function (e) {
  //通过事件接收
  this.setData({
   paramBtoA: e.detail.paramBtoA
  })
 }
})

//父组件A json （里面不能有注释）

{
 "navigationBarTitleText": "父子传值",
 "usingComponents": {
  "componentB": "../../components/son/son"
 }
}

<!-- 子组件B wxml -->
<view class="inner">
 {{paramAtoB}}
 <button bindtap='change'>向A中传入参数</button>
</view>

（注意：子组件的方法需要写在methods：{}里面）

//子组件B js
Component({
 //B在这里接收与data类似可以直接在wxml上用
 properties: {
  paramAtoB: {
   type: String,//类型
   value: 'default value'//默认值
  }
 },
 data: {

 },
 methods: {
  //触发change事件向A传值
  change: function () {
   this.triggerEvent('myevent', { paramBtoA: "666传值成功" });
  }
 }
})

//子组件B json

{
 "component": true,
 "usingComponents": {}
}

原先效果

点击按钮之后

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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

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

一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想要和html中的下拉选中的通过选中获取vaule中的属性值,其实认真查看微信picker组件详解的都知道其实是可以实现的,只不过微信给的实例是array的实例而object array实例是留给大家去动手的哟,在这里我主要介绍的mode=selector 的objectArray实现. 二.介绍:
微信小程序地图(map)组件点击(tap)获取经纬度的方法

微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"
详解如何在微信小程序开发中正确的使用vant ui组件

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr
微信小程序自定义组件封装及父子间组件传值的方法

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class
微信小程序购物车、父子组件传值及calc的注意事项总结

前言在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻
微信小程序组件传值图示过程详解

A是父组件,B是子组件父传子  <view> <componentB paramAtoB='{{paramAtoB}}'></componentB> </view> //父组件Ajson (里面不能有注释) { "navigationBarTitleText": "父子传值", "usingComponents": { "component
微信小程序组件之srcoll-view的详解

微信小程序组件之srcoll-view的详解今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y
微信小程序解析富文本过程详解

前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法来替换标签,后来找到了一个很好用的插件:WxParse. 今天分享给大家,Github地址:https://github.com/icindy/wxParse 使用WxParse解析富文本数据 1．将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要,其他
微信小程序导入图标实现过程详解

图片素材库--阿里巴巴矢量图https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1359989" 在页面输入要搜索的图标点击"入库",然后"添加至项目" 选择"编辑",即对进行编辑成自己想要的效果,名字为home 点击保存--下载至本地,则下载量.了一个.zip的压缩包其中demo_index.html内有导入的方法记录选择iconfo
微信小程序本地数据存储实例详解

微信小程序本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序switch开关选择器使用详解

本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b
微信小程序数字滚动插件使用详解

用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co
基于mpvue搭建微信小程序项目框架的教程详解

简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <

微信小程序组件传值图示过程详解

相关推荐

随机推荐