自定义组件使用

第一步:创建自定义组件

 创建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.jianshu.com/p/703a917b8cd8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 自从去年6月入市,已经经历了二轮牛熊,9.4前后的牛熊以及今年1月份的牛熊,每次都是全仓洗礼,所以到现在也没赚到多...
    眼睛歪了阅读 4,952评论 2 8
  • CB_RIPEMD 项目地址:https://github.com/caobo56/CB_RIPEMD 使用方式:...
    曹波波阅读 3,576评论 0 1
  • 在以前,人们对好身材的看法还停留在纤细这个层面,自从最近几年里健身开始流行了,线条美便成为衡量女神身材的最重要标准...
    大星呀阅读 2,994评论 0 7
  • 我讨厌自己无端就将“自卑”两个字融进骨血。 我更讨厌自己时不时让它们渗透出来,溢满我的周身。 从小就把自己当个男孩...
    ai雅阅读 1,837评论 0 0

友情链接更多精彩内容