微信小程序五

微信小程序复习笔记 组件化

不想把内容写死也是可以的 如下 通过mustach语法把它定义成为一个变量


想在哪个页面中用一下这个组件分为2个步骤
如想在home页面中用它 就在home.json中
对它做一个注册

这个路径可以写相对路径 也可以写成绝对路径

然后就可以在wxml中使用组件

上面这个东西千万不能随便删掉

37使用自定义组件化注意事项

上面创建的组件一样可以去之前的my-cpn组件中引用
先注册

再使用

如果十个页面都需要用到cpn组件
就很麻烦 小程序提供一种注册组件的方法 直接在app.json注册

一旦在全局的json文件对某个组件做了注册的话 那意味着就可以在所有地方使用这个东西而没有必要用一次注册一次
如下删掉也无影响 注意在JSON文件中注释的话会报错
但是最好只有在多个页面中用到的组件才在这里面注册
只有某一个应用的话在单独的页面注册就好了

38组件和页面样式细节

my-style里面的样式会不会对首页里面的样式造成影响 不会


假如希望my-style和home的样式相互影响
希望home页面设置的样式影响它则


如下受到影响就变成红色了

改成shared的话对页面也造成影响了Hekllo Word也变成红色的了

如下这个默认值的样式就不会受到影响

39给组件化 传递数据和样式

这几个值就会传到上面那个string那儿去

上面这个写法有个缺点就是没有默认值
假如第三个没有传入 那么它压根就没有标题


observer对等vue的watch
组件 js相当于一个桥了

如下写有个缺点 全部标题都会变成红色

先使用titleClass
property最主要的作用在于让首页给自定义组件传递过去数据 然后它来展示这些数据

接下来就可以给titleClass赋值

然后还要给类设置样式

我的做出来没反应

40自定义事件传递数据

希望点击按钮 上面数字加1 也就是自定义组件内部发生点击 外面加1
1先监听按钮的点击


这样还是不能解决问题
想办法把组件内部发生的事件传出去






如果想在home中拿到上面这些数据的话 它是通过event来拿的

41 tabcontrol组件练习

用flex布局 做

上面十年写死的情况
不能写死的话就由外界决定


接下来做一个衣服默认为红色 然后点击谁 谁就是红色
在这里插入图片描述


上面点击发生了反应 但是不知道点击的是谁 就用event




然后下面还有一个红线



内部发生了点击 告诉首页 j就相当于自定义组件内部发生了点击 告诉页面 如下

42获取组件对象的方式

data最主要是做一些数据的初始化的
把下面这个counter显示到上面去

有了这个组件之后希望在HOME里面对它进行使用
就要在HOME里面做一个注册

使用

如果只是想在组件内部对某个数据做一个修改那么只需要如下

但是在首页中不能这样子 因为当前这个page代表的是page对象 并不是组件对象

要换成组件对象

获取组件对象

就是通过下面那个class或者id去拿到那个组件对象

<m-sel class="sel-class" id=""/> 

这里面的class和id绑定一个就可以了
推荐id唯一标识
class通过.来拿 id通过#来拿



但是上面这样做其实并不规范
因为相当于在外面通过这个setData想办法直接修改如下的变量
修改数据一般最好如下暴露出来一个方法统一进行修改


这个10给上面那个num传过去

这个this.setData就是指的上面那个component组件

如上每次点击都加了10
如果想加其它数字直接修改下面那个数字就可以了

43组件化 插槽slot的使用过程

如下 中间暂时不写 等会显示



注册

没有插入任何内容时 可以使用单标签

如果希望中间第一次放按钮 第二次放文本 第三次放图片
这时候就要使用双标签了

当像上面那样做的时候 它就会把插入的标签替换到如下位置 也就是插槽的位置



以上就是单个插槽的使用

下面是多个插槽的使用
注册



从结构上看 它并没有替换任何一个插槽而是跑到后面去了

如上虽然选定了slot但是 更糟糕button压根就没有出现

如下之前这个 就是决定了组件和页面之间 样式的共享方式

加上如下属性才能使用多插槽



如上slider放在了button上面可见是没有问题的
但是我的得换一下位置它才上去 谁放在前面它编译出来就是在上面 位置靠后它编译出来就在下面它才不管你是slot几

44组件化component构造器

总结 在下面那个C欧美破嫩头中到底能传入哪些东西


如果想在某个页面里面定义函数直接就在如下大页面里面定义

但是组件不让这么干 在组件内部如果想要定义函数 必须是定义在methods里面的


observers不仅可以监听data；里面的数据 也可以监听title里面是数据

也就是说properties里的数据既可以在
这里面监听 也可以在
这里监听
只不过在observers监听 它拿不到oldVal数据只能拿到ewVal数据
都有自己的生命周期

组件对象也有自己的生命周期 分成了2部分
一个组件在一个页面比如home页面里使用 组件本身有生命周期 页面，页面也有自己的生命周期
组件可以监听组件本身的生命周期 也可以监听页面的生命周期

监听页面的生命周期情况如下