微信小程序项目搭建及组件传值

337 阅读1分钟

一、项目开发准备工具

---微信开发者工具 加 Vscode开发工具

二、项目搭建


创建你的第一个微信项目把,然后将当前文件夹在vscode中打开这样能提高你的开发效率

在vscode的的应用商店中为了能解析wxml和wxss需要安装几个插件


这样就能支持解析你的微信小程序文件了

三、解析 微信小程序的结构组成


四、新建组件和引入组件

对于小程序中的有的组件会多次的应用,所以我们需要创建组件进行复用


 这样我们的组件就已经创建好的,如果需要调用则直接在

示例-- pages/index/index.json中的


然后在idnex.wxml中调用


父向子传值:

1,在子组件的自定义标签中通过tabs=“{{tabs}}”   {{tabs}}是指父组件的data中的键值



2.在component的组件的tabs组件中的properties中调用自定义的 tabs键值有两个参数type:类型定义传值类型,value:""传值内容默认为空


子向父传值:

1.在子组件中的通过bindtap绑定一个点击事件,data-index=“{{index}}”给父组件传递的索引


2.在子组件tabs.js的点击方法接收一个参数e在获取e的currentTarget底部的传值内容,在定义一个父组件的触发事件的自定义方法handleTabsItemChange


3,在父组件的接收方法通过e的参数获取子组传递的值


至此关于小程序的组件传值就已经结束!