微信小程序自定义组件与页面值传递过程图解

前言

• 提取页面公共部分作为自定义组件，本文就组件与页面间的值传递过程用图片方式展示，仅是个人理解，可能存在偏差。

正文

完成页面传值的步骤：

1. 定义组件名为comp，写comp.wxml、comp.wxss、comp.js、comp.json，在comp.js中定义属性navbarData数据，comp.wxml中使用数据，wxss文件控制wxml样式，comp.json声明当前内容为Component；

2. 创建Page名为pa，首先在pa.json中使用usingComponents定义的组件key作为组件名（相当于变量名）作为nav-bar，value是组件的路径

3. 在pa.js中定义data中定义一个数据navbarDataPage，以便传给组件，在pa.wxml中使用nav-bar作为一个标签，并使用属性navbarData，使用navbarDataPage作为值；

4. 现在组件中会使用pa.js中定义的navbarDataPage默认值，在pa.js的修改navbarDataPage后使用setData函数，即可传入新值到组件；

图片展示：