微信小程序的父子组件传值

如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。

下面介绍父子组件的数据传递方法，以及一个简单的组件和一个复杂的组件示例。

二、父子组件传递数据的方法

1.父组件向子组件传递数据

parent.wxml

<my-component name="{{name}}" age="{{age}}"></my-component>

parent.js

data: {name: 'Peggy',age: 25
}

child.js

properties: {name: {type: String,value: '小明'},age: Number
}

父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name获取。

2.子组件向父组件传值

child.js

methods: {

微信小程序的父子组件传值相关推荐

微信小程序：父子组件传值
在微信小程序里,父组件可以向子组件传值,子组件也可以向父组件传值,不过这两种传值方式不大相同,下面先简单介绍这两种传值的区别. 两者的区别父组件向子组件传值,使用的是属性绑定的方法,并且只能传递 ...
【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
微信小程序：父子组件的通信
故事背景(可忽略) 卤煮马上要入坑微信小程序,为了开发起来更顺手一些,肯定要提前熟悉一下API.原本想找个视频看看的,但是看到网友都说,有点技术功底的都直接上手API踩坑.卤煮这种没技术功底的马上站起 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

微信小程序的父子组件传值

二、父子组件传递数据的方法

1.父组件向子组件传递数据

2.子组件向父组件传值

微信小程序的父子组件传值相关推荐

最新文章

热门文章