小程序的组件化开发 父子传值

小程序的组件化开发

【最下面的父传子讲解了组件中id的用法】

参考：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
组件化开发我们应该在miniprogram/components目录下创建文件夹

组件化开发跟小程序单页面开发还是有点区别：
如何在页面中使用组件：

1. 在页面的json文件中

 "usingComponents": {
    “a”：“组件对应的路径”
    随便起名
  }

2.再页面的wxml中直接使用：

<a></a>
<productList id="productList"></productList>

组件化开发js文件中：created(){} attached(){} detached(){}

组件中created(){} attached(){} detached(){}这些事件是和data{}同一级写
自定义的函数写在methods:{}中

data:{},
created(){},
attached(){}，
methods{}

1. 组件实例刚刚被创建好时， created 生命周期被触发 但是不能操作data中的数据
2. 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。(一般都在这个函数中操作函数)
3. 在组件离开页面节点树后， detached 生命周期被触发。(离开组件执行的函数)

父子传值

1. 子传父

子传父数据
思路：
在父组件js中创建一个自定义方法：categoryChangeEvent()
当触发父组件中子组件的事件：bind:categoryChangeEvent的时候，就会触发父组件js中的categoryChangeEvent事件，
怎么在子组件中触发bind:productList呢：使用this.triggerEvent(‘categoryChangeEvent’，{}) 对象随意传不传都行

写法：
父组件wxml：<scrollCategory bind:categoryChangeEvent="categoryChangeEvent"></scrollCategory>
父组件js：categoryChangeEvent(e){ console.log(e.detail.a) }
子组件js:this.triggerEvent('categoryChangeEvent',{ a:this.data.categories[curIndex].title })

2.父传子

父传子就简单多了
1.在父组件中先使用子组件
例如：
思路：
在夫组件中已经引入子组件：<productList></productList >
可以给productList 一个id或者class <productList id=“productList ”>
然后再子组件中自定义一个方法例如：fillData(e){},给方法一个形参
再夫组件js中调用this.selectComponent(’#productList ‘）获取到子组件【#productList 就是组件中的id名，也可以用class那么#就要变成 .】
获取到子组件就可以调用子组件中的方法，所以我们可以把父组件中的数据调用子组件的自定义方法赋值过去。
写法：
父组件wxml： <productList id=“productList ”></productList >
父组件js：例如：this.selectComponent('#productList').fillData(res.data)
子组件：fillData(listData){ }