原生微信小程序自定义组件以及组件间通讯

---

前言

        当我们在开发项目时，有时候会发现，在不同的页面中会用到相同的功能模块，,此时我们就可以将这些相同的部分提取出来并且单独设为一个"页面",然后在要应用到它的地方引用就可以了， 在vue 、react 等框架中，组件化开发的概念相信大家都很熟悉了，下面我来介绍介绍原生微信小程序如何定义组件，如果有纰漏欢迎大家指正。

---

一、新建组件

首先在根目录下新建一个 components 文件夹用来盛放我们所有的自定义组件，在文件夹下建立第一个自定义组件 cptDemo

二、文件介绍

以下文件都为 cptDemo 下的文件。

1.index.json

要在自定义组件的 json 中进行自定义组件声明,也就是告诉开发者这是一个组件:

{
  "component": true
}

2.index.js

• data：用于定义组件模板渲染的私有数据；
• methods方法：定义事件处理函数和自定义方法；
• properties属性：用来接受外部数据；

//子组件 wxml
<view>
    {{cliname}}
</view>

//子组件 js
properties：{
    cliname: {
            type:String,
            value: ''
        }
}

//父组件 wxml
<cpt-demo cliname='{{cliname}}'></cpt-demo>

//父组件 js
data:{
    cliname:"传递给子组件的值"
}

• observers：属性监听器，用于监听和响应任何属性和数据字段的变化，从而执行特定的操作

//数据监听器支持监听对象中单个或多个属性的变化
//使用通配符**来监听对象所有属性的变化
    observers:{
        '字段A,字段B':function(字段A的的新值，字段B的新值){
            //do something
        }
    }

• 自定义组件的生命周期 lifetimes

Component({
//新的写法
  lifetimes: {
     created:function(){
      //在组件实例刚刚创建时执行
      //此时不能调用setData
      //只能给组件的this添加一些自定义的属性字段
     },
     
     ready: function() {
      // 在组件在视图层布局完成后执行
     },
     
     moved: function() {
      // 在组件实例被移动到节点树另一个位置时执行
    },
    
       
    attached: function() {
      // 在组件实例进入页面节点树时执行
      //this.data已经被初始化完毕
      //绝大多数的初始化工作都在这里完成（发送获取初始数据...）
    },
    
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      //退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
      //适合做一些清理工作
    },
    
    error: function() {
      // 每当组件方法抛出错误时执行
    },
    
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

• 组件页面的生命周期 pageLifetimes

//当页面发生变化时触发函数
   pageLifetimes:{
       show(){ //页面被展示
           console.log('show');
       },
       hide(){ //页面被隐藏
           console.log('hide');
       },
       resize(){ //页面尺寸发生变化
           console.log('resize');
       }
   }

• 插槽

Component({
    options:{
        //开启多slot支持
        multipleSlots:true
    },
    })
 //自定义组件
 <!--components/test4/test4.wxml-->
<view>test4组件</view>
<slot></slot>
<slot name="m1"></slot>

//使用组件
<test4>
<view>slot</view>
<view slot="m1">m1</view>
</test4>

三、在父组件中引入子组件

在父组件的 json文件中引入，这种方式叫局部引用，全局引用可在 app.js

{
    "usingComponents": {
        "cpt-demo":"/components/cptDemo/index"
    }
}

在父组件wxml文件使用

<cpt-demo></cpt-demo>

四、父子组件通讯

我总结了下面三种组件通讯方式：

• 属性绑定
  用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据(只能传递数据，不能传递方法)
• 事件绑定
  用于子组件向父组件传递数据，可以传递任意数据(包括数据和方法)
• 获取组件实例
  父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

属性绑定

• 属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件;
• 实现： 通过父组件向子组件传递数据，子组件通过 properties 接收;

//父组件 .js - 定义要传递的值
 data: {
   count: 0
 }
   
//父组件 .wxml - 将名为count的值传递給子组件cpt-demo
 <cpt-demo count="{{count}}"></cpt-demo>

//子组件通过 properties 接收父组件传递过来的 count
 properties: {
   count: {
   type:Number
}
 },

事件绑定

• 事件绑定用于实现子向父传值，可以传递任何类型的数据;

• 实现：
          在子组件的 js 中，在特定的时机通过调用 this.triggerEvent (‘自定义事件名称’, { 参数对象 }) 产生一个自定义事件，并且可以带上事件参数对象
          在父组件的 wxml 中的子组件标签中，使用 bind :自定义事件名称=“事件处理函数” 来监听自定义事件;
          在父组件的 js 中，定义一个接收传递自定义事件的函数，并通过 e.detail 获取到子组件传递过来的数据;

子组件 - 在特定的时机通过调用 this.triggerEvent 产生一个自定义事件

// .wxml - 绑定点击事件，每次点击时触发子组件向传递父组件的方法
 <button bindtap="sonCount">点我传递</button>
 ​
 // .js - 定义触发的方法
 data: { count: 11 }
 methods: {
   sonCount(){
       // 使用 triggerEvent 来通过定义事件 sync 传递属性值 value 
       this.triggerEvent('sync', {value: this.data.count} )
     }
 },

父组件 - 使用 bind :自定义事件名称=“事件处理函数” 监听自定义事件

<test bind:sync="syncCount"></test>

父组件 - 定义一个接收传递自定义事件的函数，并通过 e.detail 获取到子组件传递过来的数据

 syncCount(e) {
     console.log('执行 syncCount', e)
       
     // 通过 e.detail.value 获取获取子组件传递过来的数据 value
      console.log(e.detail.value) // 11
   },

获取组件实例

• 通过在子组件标签上定义 id或class选择器，并在父组件里调用 this.selectComponent(“标签选择器”) 来获取子组件的实例对象，从而 直接访问子组件的任意数据和方法;
• 实现：定义标签选择器并通过 this.selectComponent(“标签选择器”) 来获取子组件实例对象;

//父组件 wxml 定义子组件的class选择器或id选择器
 <cpt-demo class="son" id="sonID"></cpt-demo>
 <button bindtap="getChild">获取</button> 

//父组件 .js
   getChild(){
     // 通过 selectComponent('#sonID') 获取 id 为sonID的实例对象
     const child = this.selectComponent('#sonID');
     
     // --- 获取到子组件的实例对象，就可以对子组件的属性方法进行操作
     
     console.log(child); // 查看子组件实例对象
     console.log(child.data.count); // 查看 count 属性
     child.addCount(); // 调用子组件上的方法
   }

---

总结

        以上就是在原生微信小程序中如何自定义组件，以及组件间的通讯，如果有纰漏的地方，欢迎大家来指正……