目录
一.自定义组件
1.创建自定义组件
类似页面,一个自定义组件由json ,wxml,wxss,js 4个文件组成
2.声明组件
在需要引入组件的页面的json文件中,在usingComponents里面写键值对,写组件名和路径
3.使用组件
在需要引入组件的页面的wxml文件中,添加组件标签
效果:
二.Tabs样式优化
wxml:
wxss:
js:
效果:
三.标题激活选中
1.页面.js文件中 存放事件回调函数的时候 存放在data同层级下
2.组件.js文件中 存放事件回调函数的时候 ,必须要存放在methods中!!!
// 1.绑定点击事件 需要在methods中绑定
// 2.获取被点击的索引
// 3.获取原数组
// 4.对数组循环
// (1)给每一个循环项 选中属性 改为false
// (2) 给 当前的索引的项 添加激活选中效果就可以了
四.父向子组件传递数据
父组件(页面)向子组件传递数据,通过标签属性的方式来传递
(1)在子组件上进行接收
(2)把这个数据当成是data中的数据直接用即可
1.在父组件的wxml文件中,在Tabs标签中添加属性,表示页面向子组件传递了属性aaa,值是a123a
2.在子组件的js文件中,在properties中接收父组件传递的数据,properties里面要填接收的数据的名称,这里的名称是aaa,aaa是个对象,里面写数据的类型和数据的值,数据的值不填就默认是上面的值“a123a",填了数据值,值就是我们写的那个值
3.在子组件的wxml中,使用数据的名称
效果:
父向子传递的过程
传递tabs数据
1.将子组件的.js文件中data的tabs数组剪切,粘贴到父组件的.js文件 中
2.父组件的wxml中传递tabs数据
3.子组件.js文件中接收tabs数据
4.使用数据的名称
效果:
优化:
问题:切换不同标题时,父组件的数据没有发送改变。原因是切换不同标题时会触发handleItemTap事件,然后this.setData的tabs会在子组件的data中拷贝了一份tabs,再次切换标题时,父组件中有tabs,子组件中也有tabs,两个tabs当然是不行的,发生改变的是子组件中的tabs,我们需要让父组件中的tabs发生改变
五.子向父传递数据
子向父传递数据,通过事件的方式传递
(1)在父组件的标签上加入一个自定义事件
解决办法:将子组件中的索引传给父组件,然后父组件在它的方法中处理tabs,实现改变
1.先注释掉子组件的.js文件中部分代码
2.在子组件的.js文件中触发父组件的自定义事件 同时传递数据 给父组件
3. 在父组件的wxml文件中绑定自定义事件
4.在父组件的.js文件中写一个事件回调函数,接收传递过来的数据
5.将之前子组件.js文件中注释的代码复制粘贴到父组件的.js文件的回调函数中
效果:
六.自定义组件-slot
slot 标签 ,其实就是一个占位符 , 插槽
等到父组件调用子组件的时候 ,再传递标签过来, 最终这些被传递的标签就会替换slot 插槽的位置
1.在子组件的wxml中使用slot标签
2.在父组件的wxml文件中写标签,根据选中不同标题显示不同内容
效果: