小程序组件化开发
创建-注册-使用
一样需要四个文件
哪个组件需要用,就得在自己的json文件注册
注册完以后既可以用
这是组件必须有的,证明是组件。
细节
命名要规范,可以嵌套调用组件
也可以全局配置,这样每个页面都可以引用组件
组件的样式细节
标签选择器会影响外部。外部用标签选择器也会影响内部
所有用class最好。
页面的js中的对象是pages(),APP.js中的对象是APP(),而组件中的对象则是conponent,
apply-shared是默认,外部影响内部,而内部不能影响外部
没有影响,
外部影响了。
当值为shared时,就可以互相影响。
组件页面通信
传数据。
1 在组件的js里面,value是默认值
2传
3展示
结果
监听值改变,第一次从默认值变成哈哈哈,第二次从哈哈哈变成嘿嘿嘿。
传样式
1定义
在组件内定义好,做好接受的准备
2 传
在引用组件是顺便传过去,但传过去这个可以看成是传一个类过去,而这个类需要在自己的wxss里面定义。!!!
相当于他自己定义好这个类,再把这个类传过去,而组件只需要做好接接受的准备即可。
组件向外传递事件
这个事件还是跟vue里面的差不多,其他两个页面的事件都是直接放在外面,而组件的事件需要放在methods里面,
1 首先。在组件里面监听
2 监听到后在组件的js文件里处理这个事件,
this.triggerEvent是发送事件,第一个是发送的事件名称,第二个是参数。vue中子组件发送事件是。
this.$emit(‘事件名称’,传递的值。)
3 发送出去后,在引入组件时顺便用bind:监听,vue里是用@监听,监听到后在作出处理
4 作出处理,在自己的js文件中处理监听到的子组件发出来的事件。
传过来的值放在event的detail里面
页面直接调用组件的方法
this.selectComponent()就可以访问组件里面的方式
页面的方法修改组建的数据
在页面的点击事件直接修改组建的数据,记得要用setData,不然不能达到响应式效果。
但这种方法不可取,最好不要在页面直接修改数据。在组件创建一个方式修改数据,页面直接调用就好
效果是一样的。