微信小程序组件通信入门及组件生命周期函数

组件生命周期函数链接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

微信小程序中使用方法传递参数

错误写法：

<view bindtap='btn_button(index)> 父级  </view>

正确写法

<view bindtap='btn_button' data-str="参数"> 父级  </view> //传递的参数必须以data-xxx开头

1、暴露组件，在组件xxx.json里

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

2、在父级注册组件，在xxx.json里

{"usingComponents": {"sron":"/components/sron/sron"}
}

3、父组件向子组件传递参数

<sron mes="{{transmit}}"></sron> //transmit是来自data里面的数据

4、子组件接收参数

Component({/*** 组件的属性列表*/properties: {mes:{type:String,value:''}},/***  在组件实例进入页面节点树时执行*/attached(){console.log(this.properties.mes)}
})

注意：此处两个参数要相同

1）在小程序中改变data中的状态使用 this.setData

data:{curAdProp:{},},methods: {dataInit(){this.setData({'curAdProp': "我要改变data里面curAdProp的数据"});}
}

5、子组件向父组件传值（通过 triggerEvent 方法）

<text bindtap='btn_sron'>我是子组件</text>

//是组件---->方法需要写到methods函数里面methods:{btn_sron(){this.triggerEvent("btn_box","我是传递给父级的数据")//btn_box是将要在父级触发的事件}}

--------------------------父级中-----------------------------

<sron bind:btn_box='btn_sron'></sron> //btn_sron是btn_box事件要触发的方法

//非组件----》方法不用写在methods函数里面btn_sron(e){console.log("来自子组件的数据",e.detail)//e.detail是来自子组件的数据}

转载于:https://www.cnblogs.com/tlfe/p/11126861.html

微信小程序组件通信入门及组件生命周期函数相关推荐

微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...

微信小程序组件通信入门及组件生命周期函数

微信小程序组件通信入门及组件生命周期函数相关推荐

最新文章

热门文章