小程序基础组件总结 - 整理 1

组件

input bindinput='fn'  
fn(event){
    event.detail.value //input中的值
    return xxx    //xxx会直接替换value中的值    
}

【组件页面】

wxml --    <text bind:tap='changeNum'>{{num}}</text> {{myTellSon}} is form parent
js  -- 
Component({
    properties:{
        myTellSon : Number   //my-tell-son
    }
    data : {
        num : 0
    },
    attached(){ //为了引入组件的父级页面，第一次就更新，可以默认触发1次
        this.triggerEvent('mytellParentEv',123); 
    },
    methods : {
        changeNum(event){
            this.setData({
               num : Math.random()
            });

            this.triggerEvent('mytellParentEv',123); 
        }   
    }
})
json -- { "component":true }
wxss --       

【组件引入页面】

wxml -- <myskilltag my-tell-son='456' bind:mytellParentEv='mytellParentFn'></myskilltag> {{ fnum }}
json -- { "usingComponent":{
            "myskilltag" : '路径' //组件标签名称myskilltag
        } }
js -- Page({
        data : {
            fnum : 0
        },
        mytellParentFn(event){
            console.log(event.detail)  //子级传递过来的数字 123
            this.setData({
                fnum :  event.detail //将子级传递的数据同步到组件引入文件
            })
        }

      })

总结：

 1.组件数据通讯 父级=>子级 使用自定义属性 注意组件标签上使用 烤串命名 ， 子级组件数据验证数据格式，同时驼峰命名

 2.组件数据通讯 子级=>父级 使用this.triggerEvent('自定义事件名称','数据') 父级绑定自定义事件，事件处理函数中，同步数据信息

 3.组件严格按照格式来操作，方法放在methods中，默认加载触发事件为 attached ，提供页面加载后第一次渲染数据