微信小程序组件与组件之间的通讯

创建组件:

在项目根目录创建一个名为components 的文件夹,在文件夹中创建一个以组件名命名的子文件夹,在子文件夹上右键点击选择创建component 这时会在子文件夹内生成4个基础文件。

 

引用组件:

1.在需要引用组件的页面中,找到页面的.json 配置文件,新增usingComponents 节点

2.在usingComponents 中,通过键值对的形式,注册组件,键为注册的组件名称,值为组件的相对引用路径。

3.在页面的.wxml 文件中,把注册的组件名称,以标签形式在页面上使用,即可把组件展示在页面上。

注意: 注册组件名称的时候,建议把名称注册为以短横线链接的形式,例如: vant-button 或custom-button 

{
  "usingComponents": {
    "test-com": "../../components/test/test"
  }
}

<test-com></test-com>

 

使用样式美化组件:

组件对应wxss文件,只对组件内的节点生效,编写组件需注意:

1.组件和引用组件的页面不能使用id选择器,属性选择器[a]和标签名选择器,需该用class类选择器。

2.组件和引用组件的页面中使用后台选择器(.a b) 在一些极端情况下会有非预期的表现。如遇,请避免。

3.子元素选择器(.a>b) 只能用于view组件遇其子节点,用于其他组件可能导致非预期情况。

4.继承样式,如font, color,会从组件外继承到组件内。

5.出继承样式外,app.wxss 中的样式,组件所在页面的样式对对自定义组件无效。

 


组件的data与methods

使用data定义组件的私有数据:

小程序组件中的data,和小程序页面中的data用法一致,只不过

1.页面的data定义在Page()函数中

2.组件的data定义在Component() 函数中

在组件的js文件中:

1.如果要访问data中的数据,直接使用this.data 数据名称即可。

2.如果要为data中的数据重新赋值,调用this.setData(数据名称,新值) 即可

在组件的.wxml 文件中:

如果要渲染data中的数据,直接使用{{数据名称}} 即可。

 

使用methods定义组件的事件处理函数:

和页面不同,组件的事件处理函数,必须定义在methods节点中,示例代码如下:

  methods: {
    btnHandle: function () {
      console.log(‘test‘)
    }
  }

 


 

组件的properties

1.properties 的作用

类似于vue组件中的props,小程序组件中的properties是组件对外的属性,用来接收外界传递到组件中的数据。

在小程序中,组件的proerties和data的用法类似,他们都是可读可写的只不过:

data更倾向于存储组件内的私有数据。

properties 更倾向于存储外界传递到组件的数据。

声明properties的两种方式:

Component({

  properties: {

  msg: "hello word"
  }

})

 

Component({

  properties: {

  msg:{

       type: string,

   value:  "hello word"

     }
  }

})

 

为组件传递properties 的值:

可以使用数据绑定的形式,向子组件的属性传递动态数据,示例代码:

// 父组件
<view>
  <test-com prop-a="data12312312" prop-b="{{abc}}">
  </test-com>
</view>


// 子组件
 properties: {
      propA: String
  }

<view>{{propA}}</view>

 

组件中修改properties 的值:

小程序中,properties的值是可读可写的,他的用法与data一致,可以通过setData 修改properties 中的值。

properties: {
      propA: String
  },


  methods: {
    btnHandle: function () {
      this.setData({
        propA : "abc123"
      })
    }
  }

 


数据监听器:

数据监听器可以用于监听和响应任何属性和数据字段的变化,从而执行特定的操作,作用类似于vue中的wacth

数据监听器从小程序基础库版本2.61开始支持

监听器的基本语法如下:

 observers: {
    "字段A,字段B": function (字段A新值, 字段B新值) {
      do something
    }
  },

 

组件的生命周期:

组件的生命周期,指的是组件滋生的一些函数,这些函数在特殊时间点或遇到一些特殊的框架事件时被自动触发。

其中,最重要的生命周期是, created, attached, detached 包含一个组件实例生命流程的最主要时间点。

+组件实例刚刚被创建好时: created 生命周期被触发,此时还不能调用setData。通常情况下,这个生命周期只应该用于该组件this添加一些自定义属性字段。

+ 在组件完全初始化完毕,进入页面节点树后,attached生命周期被触发,此时this.tata已被初始化完毕,这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

+ 在组件离开页面节点树后,detached 生命周期被触发,退出一个页面时,如果该组件还在页面节点树中,则detached会被触发。

 

组件可用的全部生命周期

created 组件刚刚被创建时执行

attached 组件实例进入页面节点树树执行

ready 组件在试图层布局完成后执行

moved 组件被移动到节点树另一个位置时执行

detached 组件从页面节点树移除时执行

error  组件方法抛出错误时执行

 

自定义生命周期函数:

生命周期方法可以直接定义在Component 构造器的第一级参数中。

自小程序基础库版本2.23起,组件的生命周期也可以在lifetimes 字段内进行声明(这是推荐的方法,优先级最高)

Component({

 lifetimes: {
   attached () {

   },
   detached () {

   }
  },

})

 

组件所在页面的生命周期:

有一些特殊的生命周期,他们并非于组件有很强的关联性,但有时组件需要获知,以便组件内部处理,这样的生命周期称为“组件所在页面的生命周期”,在pageLifetimes 定义段中定义,其中可用的生命周期包括:

show 组件所在页面被展示时执行

hide 组件所在页面被隐藏时执行

resize (object)  组件所在页面尺寸发生变化时执行。

 

组件插槽:

在组件的我先忙了中可以包含slot 节点,用于承载组件使用着提供的wxml结构。

默认情况下,一个组件的wxml中只能有一个slot,需要使用多slot时,可以在组件js中声明启用。

注意: 小程序目前只有默认插槽和多个插槽,暂不支持作用域插槽。

 

 

 

 

 

 

 

 

 

 

 

 

微信小程序组件与组件之间的通讯

上一篇:【记录】微信emoji表情存入数据库


下一篇:微信授权登录