小程序之自定义组件(二)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

在上一篇文章里.我们记录了一下.组件的创建、使用.以及组件传值.喜欢的可以看一下.经过第一篇文章的学习.我又认真的看了一下,微信小程序的文档.确实有很多细节没有注意到.上一篇文章,分享的是自己在开发和使用中,自己的理解,如果有什么不对,希望指出.下面我们继续分享一下组件的其他事件.

您能在这里看到啥

1. 前期准备
2. 组件事件回调

前期准备

我们直接使用上一篇文章中准备的测试用例,即可

1. 自定义组件test
2. 父组件indez

目录结果如下所示

组件事件回调

1. 组件间通信方式

   1. WXML数据绑定

      用于父组件向子组件的属性赋值.仅支持JSON兼容数据.基于上篇文章的测试数据.我们直接引入.

      组件的属性

      /**
        * 组件的属性列表
        */
        properties: {
            // 这是我们定义属性的名字
            title: {
                // 属性的类型 可以是 String,Boolean,Number等等基础类型.
                type: String,
                // 默认值
                value: '',
                // 用于监听属性值的变化
                observer: '_configTitle'
            }
      },
      

      我们在test组件里面,对外公开了一个title属性.用于父组件向test组件传值.下面是我们在父组件给子组件传值的事例.如下所示

      <test title="我是父组件传值"></test>
      

      执行结果如下所示:

      如果你不知道.title是怎么在子组件里赋值的.请看上篇文章.这里我认为你已经知道.

2. 事件

   用于子组件向父组件传递数据.想要完成事件传递,准确的来说,分为两步. 先监听,后**触发.如下所示

   • 父组件监听事件

     监听事件.其实和监听基础组件事件是一样一样.方法名字都是以bind开头.如下所示

     index.wxml文件内容如下所示

     <!-- 可以理解为自定义组件触发事件时,会调用 Page里onTapTitle 方法 -->
     <test title="我是父组件传值" bindtaptitle="onTapTitle"></test>
     

     index.js文件内容如下所示

     index.js
     Page({
          
           <!-- 组件响应事件 -->
          onTapTitle(e) {
              <!-- e.detail 如果子组件有返回值,则detail对象,代表子组件传递的值.
              当然如果没有返回值,方法可以改成onTapTitle()
              这里我们暂时保留个悬念,我们先把触发事件搞定
              然后我们再回头看一下.不然事件没有闭环.
              -->
              conslog(e.detail);
          }
     })
     
     

   • 子组件触发事件

     子组件触发事件的时候,需要使用triggerEvent方法.才可以完成事件回调,下面我们看一下这个方法是怎么使用的.

     triggerEvent我们点进去,看一下官方事例.

     /** 触发事件，参见组件事件 */
     triggerEvent<DetailType = any>(
         name: string,
         detail?: DetailType,
         options?: TriggerEventOption
     
     ): void
     

   从上面的方法里,我们知道

   • name: 指定事件名,对应的是父组件的监听事件,格式是:bind+name.
   • detail: detail对象,也就是回调数据,在父组件取值格式是:e.detail.
   • options: 触发事件的选项.这个可以参考官方讲解,这里我就不再说明了,我会在后期的事件中,在好好分享一下

   下面我们看一下,在子组件具体实现方式.

   test.wxml
   <view bindtap="tapTitle">{{noramltitle}}</view>
   
   

   test.js
   tapTitle() {
     this.triggerEvent("taptitle",{"data":"我是子组件传递的数据"})
   },
   

   通过我们点击我是父组件传值这个文字.我们看一下在index.js的触发方法里的打印吧,如下所示 这样我们就完成了初步的组件事件回调.

系列文章

• 小程序之自定义组件(一)