美文网首页
小程序自定义组件及使用

小程序自定义组件及使用

作者: _TSRed | 来源:发表于2018-07-04 13:53 被阅读0次

    第一步:创建自定义组件

     创建compoents目录,在该目录下创建要复用的组件,例如:dialog组件
    
     其中dialo.js参数说明:
    
       properties:接收父级传递过来的值
    
         例如:
              properties: {
                 title:{
                   type:String,
                   value:"标题"
                 },
                 content:{
                   type:String,
                   value:"内容"
                 },
                 cancelText:{
                   type:String,
                   value:"取消"
                 },
                 confirmText:{
                   type:String,
                   value:"确定"
                 }
    
              }
    
    

    第二步:如何引入组件

    例如:在login页面中引入dialog组件

    在dialog.json中引入

    例如:

            {
                "usingComponents":{
                    "dialog":"/components/dialog/dialog"
                }
            }
    
    

    然后再dialog页面上使用dialog组件:

        例如:
    
            <dialog id="dialog"
                    title="这是一个标题"
                    bind:confirmEvent="_queding"
                    bind:cancelEvent="_quxiao"
            ></dialog>
    
    

    注意:
    如何派发事件: this.triggerEvent('自定义事件名',要传递的数据);

         triggerEvent相当于vue的$emit
    
     例如: this.triggerEvent('confirmEvent',{name:"确定"});
    
    

    如何监听事件:用bind监听派发过来的事件 相当于vue中的@

           例如:   bind:confirmEvent="_queding"
    
    

    小程序支持单slot和多slot::与vue类似

    参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

    数据持久化:

     cookie,H5本地存储(localstrorage,sessionStorage),webSql
    

    相关文章

      网友评论

          本文标题:小程序自定义组件及使用

          本文链接:https://www.haomeiwen.com/subject/uaeeuftx.html