小程序 组件

我只是一个虾纸丫 提交于 2020-03-12 08:32:29

自定义组件

如何自定义组件

1 创建一个文件夹,这个文件夹用来存放所有自定义组件
2 每个组件都用一个文件夹包裹,模拟pages的方式来管理自定义组件
3 在页面引用自定义组件,必须先在page.json中注册我们自定义组件
page.json

{
  "usingComponents": {
    "com" : "/componentes/com/com"
  }
}


4 在wxml中就可以直接使用了
<com></com>

页面向组件传值

1、组件中的wxml文件肯定有一个变量来接收页面的传值

<!-- name值是由页面决定的 -->
<view>{{name}} is dsb</view>

2、我们要在组件的js文件中给这个name变成组件的属性:
  properties: {
    name:{    //属性名
      type:String,  //属性的类型
      value:"egon"  // 属性的默认值,如果页面没有给这个name赋值,就使用这个value的值
    }
  },
  
3 页面的wxml文件中直接给这个组件的name属性赋值就可以了,就相当于传值
<com name = "bob"></com>  //可以是固定值
<com name = "{{name1}}"></com> //这里的可以是变量

组件向页面传递事件

1 组件要绑定一个事件 写法如下
<button bindtap="com_jia" data-num="1">点我加1</button>
2 在组件的js中的中:
  /**
   * 组件的方法列表
   */
  methods: {
    com_jia:function(e){
      console.log("con-jia",e)
      //把事件抛给页面
      this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件,如果我们要向页面抛事件时候,传参数,例如:{num:e.currentTarget.dataset.num}
    }
  }
3 页面中如何捕获组件中传过来的事件;
<com  bind:jia1 ="jia"></com>

4 页面的事件的响应函数
 jia:function(e){
    console.log(e)//组件传过来的参数,在e.detail中
    var that = this
    that.setData({
      num : that.data.num + +(e.detail.num)
    })
   
  }

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!