原生小程序开发大坑component的生命周期函数created中setData无效(小程序弹层代码封装)

话不多说直接上demo(~~~~~~~~~~~~但是一定要仔细看~~~~~~~~~)

我这里要实现的功能是实现一个黑色背景框

可以调整文本框的位置，比如现在是在中间，还可以放到头部，和尾部
只需要传递 top center bottom

这样就会出现在头部

底部


因为我设置的有默认值，所以不传参的话默认就是在中间部分展示

为什么我组件里可以写入，标签呢？
这里我用到了插槽技术

插槽slot

这里就是我封装的组件

slot这里我就不讲了，如果需要的朋友多的话，我会抽时间给大家写一个关于slot的使用，不过react，vue，小程序他的插槽逻辑都是一样的，会一个就都会了。

开始正题为什么要修改setData里的参数呢？

因为我这里使用的是flex布局，可以快速调整子元素的位置，就是简单。

align-items 可以操作元素的y轴就是竖着的位置

这里我需要用到三个值：flex-end，flex-start，center
flex-start：就是在头部展示在父元素内最上面，官方一点的话（与交叉轴的起点对齐。 向上对齐）
flex-end：则反之，（与交叉轴的终点对齐。 向下对齐）
center：字母意思就是，在父组件的中间展示 (与交叉轴的中点对齐。 居中对齐)
但是我刚才需要传入组件的参数是： top、center、bottom
为什么要这样做呢?

1. 让后期人员使用更加的方便
2. 语义化更明显，方便维护
3. 单纯就是为了方便

这个时候就需要我对他做一个初始化把传递出来的参数，返编译一下，动态的赋值给元素

自定义组件(component)有那些生命周期

符合我们条件的情况无非就两个钩子函数created、attached
先使用created

问题出现了setData失效了
我这里的log已经说明created执行了

先来排错,验证setData执行了没有

这里看着data里的参数也被修改了，这是为什么呢页面没有渲染上呢？

在created中 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

如何解决component的生命周期函数created中setData无效的问题呢？

重点：用之前还是仔细看看开发文档吧，要细心一点
解决办法：使用attached钩子(在组件实例进入页面节点树时执行)