微信小程序：双层嵌套自定义组件如何传递数据给父组件及数据更新处理

总体概述

在偶然，开发一个日历小程序时，在使用了ColorUI的框架下，布局上日历放在小程序标题，因为ColorUI的fixed无法精确获取日历（可展开与隐藏）高度问题。因此采用了双层嵌套组件。实现图如下：


下面看wxml代码结构布局
index.wxml引用colorUI框架中的cu-custom

cu-custom.wxml引入我自己写的自定义组件calendar

代码实现传递数据

好，在了解完布局直接进入主题

父组件传递给子组件

在index.wxml上将获取的事件数据{{event_list}}传递到cu-custom的properties的对象数据中

// index.wxml


//cu-custom.js
 properties: {
    eventList:{
      type:Array,
      default:[]
    },
 }

cu-custom.wxml再次将{{eventList}}传递calendar.js，这样父组件已经将eventList传递到cu-custom嵌套的calendar组件内。

// cu-custom.wxml


//calendar.js
   properties: {
    eventList:{
      type:Array,
      value:[],
      observer:function(newVal){
        this.setInfo(newVal)
      }
    }
  },

子组件传数据给父组件

既然已经实现了数据父传子，那么接下来子应该报答父，我们这里用的this.triggerEvent(‘updataArr’,eventList)自定义事件，原理是在子组件eventList发生变化时，触发上层父组件自定义的updataArr事件。
相信有人已经看到updataArr这个自定义事件，没错就是js逻辑层绑定回视图层。还没懂得可以参考下主体代码。

//calendar.js
	//在自定义组件method里函数更改了calendar中的eventList用triggerEvent
	//用this.triggerEvent('updataArr',eventList)即可传递数据去上层父组件
	methods:{
		delete(){
			let eventList = []
			this.setDta({
				eventList:eventList 	
			})
			this.triggerEvent('updataArr',eventList)
		}
	}
	
// cu-custom.wxml

// cu-custom.js
methods:{
		updataArr(e){
	      console.log(e.detail)
	      this.triggerEvent("updataArr",e.detail)
	    },
	}

到这里大概都明白是这个流程怎么实现了，现在会看index.wxml可以知道一下index.wxml又重新将子子组件传来得数据又绑定了index.wxml的data。

数据更新

因为index.wxml的data中eventList重新渲染了一次，那么怎么再次传回子组件，可以发现其实是一个循环操作实现，页面的渲染不可能循环渲染，因此，只需在calendar添加一个eventList的数据监听事件，每次eventList变的时候都会触发就好了。
有了解过的会发现在calendar.js的properties组件属性列表有个observer事件，这个就是监听eventList数据的变化。

calendar.js
  properties: {
    eventList:{
      type:Array,
      value:[],
      observer:function(newVal){
        this.setInfo(newVal)
      }
    },
  },

注：博主是小白无法详细解析observer，只能知道这样解决，这是一个因为布局问题出现了双层嵌套组件。狗头保命.jpg