美文网首页
自定义组件使用

自定义组件使用

作者: 奇妙琦 | 来源:发表于2018-06-12 10:03 被阅读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.jianshu.com/p/703a917b8cd8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

  • 自定义组件

    创建自定义组件 使用自定义组件

  • React组件的生命周期学习笔记

    创建新组件的API 使用自定义组件1(类似DOM组件) 使用自定义组件2(工厂方法) 注意:React.DOM.*...

  • 微信小程序-自定义组件

    一、自定义组件介绍 微信小程序提供了自定义组件扩展机制,允许我们使用自定义组件的方式来构建页面。 自定义组件可以使...

  • react自定义组件中使用ref

    一、自定义组件使用ref并且透传子组件ref 自定义组件中使用ref需要用到react的2个hooks:1.for...

  • 小程序的自定义组件

    小程序允许我们使用自定义组件的方式来构建页面。 自定义组件 1. 创建自定义组件 类似于页面,一个自定义组件由 j...

  • vue组件的使用

    props和$emit 组件间通讯和自定义事件 父子通讯 props $emit兄弟组件或者隔代组件使用自定义事件...

  • v-model

    使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。...

  • VUE PC端实现滑块验证效果

    1.定义自定义组件 2.在需要使用的组件内调用组件

  • 微信小程序(三)

    小程序自定义组件使用 第一步:创建自定义组件 第二步:如何引入组件 例如:在login页面中引入dialog组件 ...

  • wx小程序三

    小程序自定义组件使用 第一步:创建自定义组件 第二步:如何引入组件 例如:在login页面中引入dialog组件 ...

网友评论

      本文标题:自定义组件使用

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