使用组件

声明组件

1.在目录中右键，新建components
2.在页面的json，属性中加入"component": true,

编写组件

父

声明：

"usingComponents": {
  "address": "../../components/address/address"
 },

1.usingComponents使用到的组件列表
2. address: 组件名称
3. …/…/components/address/address：组件的文件位置，可以使用相对路径和绝对路径。

使用：

 <address style="height: 100%;width: 100%;" dailogSelectAddressShow="{{dailogSelectAddressShow}}" currentIndex="{{currentIndex}}" bindchangeAddress="changeAddress"></address>

address :组件名
dailogSelectAddressShow||currentIndex：传给子组件的值
bindchangeAddress：绑定的函数

javascript">changeAddress:function(res) {
  console.log("aj->changeAddress:",res.detail);
  }

子

1. properties 父页面想子页面传值

2. data 当前页面的数据，当然会集成properties的内容，统一有父页面的data管理，这里子页面可以使用父页面的数据，虽然这不合理，但是方便，但同时要注意命名重复的问题。以内存实际对象为主。

3. method:页面中所有需要用到的函数大部分操作函数在这里编辑

4. lifttime 生命周期函数： 但需要用到生命周期函数的时候，就需要了解生命周期：(自己看吧)

javascript"> attached: function () {},
  moved: function () {},
  detached: function () {},
  ready: function () {
   // console.log("ajsp-ready");
   let that = this;
   net2.queryQXMC('扬州市', qxmcList => {
    let addressFormitems = lf.addressForm;
    addressFormitems[1].options = qxmcList;
    that.setData({
     addressFormitems: addressFormitems
    });
   });
  }

 },

5. 回传

javascript"> this.triggerEvent('changeAddress', zz)

triggerEvent：指定回传函数：.
changeAddress：父页面声明函数
zz:回传的值，父页面通过 detail来获取

坑之大~一锅炖不下

无反应

1. triggerEvent 函数中声明的函数名，是否在布局中进行了声明

2. 重新编译，如果打开热重载，组件的js代码就不会及时更新，但布局代码会更新。有意思。

3. 重启ide，防止缓存侵占，就是ide缓存不刷新的毛病。

继承父页面的样式

javascript">在组件的js页面中加入（与properties同级）
 options: {
  styleIsolation: 'apply-shared'
 },

目录层级

1. ./ ：当前目录
2. …/ ：上一层目录
3. / ：指向下一层目录
4. 相对路径：./(当前文件夹) 或 …/（上层文件夹） 开头 相对于当前的操作的文件的路径。
5. 绝对路径：/ (项目路径)或Pages/(Pages路径)。 当然这也是相对于项目的路径。

有错误希望指正。感谢大家的点赞支持。嘻嘻