微信小程序-自定义组件(页面与组件间的通讯传值)

最近项目上需要用到微信小程序的自定义组件,对于小程序来说这一部分的知识还是很重要的,这里简单的梳理一下自定义组件与页面间的传值及通讯

一、自定义组件的构建:

1. 首先需要构建我们的自定义组件,最好将所有的组件统一放在与pages目录同级的components文件夹(如果没有就创建一个吧)中,创建我们的组件文件夹test,在文件夹中建好4个必要文件json、wxml、js、wxss

2. 确保test.json文件中声明好是组件

{
    "component": true,
}

3. test.js文件中以Component注册构造器

Component({
  properties: {
    // 此处为页面传值进来的数据存储位置
  },
  data: {
    // 此处为组件内部使用的数据存储位置
  },
  methods: {
    // 此处为组件内方法声明的地方
  }
  //还有组件生命周期函数lifetimes、
  //组件所在页面生命周期函数pageLifetimes、
  //数据监听器observers这几个未罗列出来要深入的可以去看官方文档
})

4. test.wxml文件中写好组件内容

<view>这是组件的内容</view>

到此就完成了自定义组件的创建

二、组件的引用及传值:
(此处假如我们的页面是main)

1. 引用组件
   main.json文件中配置组件

{
  "usingComponents": {
    "testName": "/components/test/test"  // 组件路径
  },
}

main.wxml文件中使用组件

<testName />   
<testName></testName>
//两种引用方式都可以,一般使用开闭标签会配合slot使用,暂不详解,可以看官方文档

2. 组件传值
   到上述步骤后已经完成了组件的创建及引用,此时我们进行传值,让我们在页面引用组件时传递一个值给组件来渲染

首先组件test.wxml中写好需要传值渲染的标签

<view>{{ innerData }}</view> //此处即为组件所渲染的值

然后组件test.js中声明好数据innerData的位置

Component({
  properties: {
    // 此处为页面传值进来的数据存储位置
    innerData:{
		type:String, //此处可以规定值的类型
    	value: 'defaultValue' //此处可以设置默认值,如果不传值则为默认值
    }
  },
  data: {
    // 此处为组件内部使用的数据存储位置
  },
  methods: {
    // 此处为组件内方法声明的地方
  }
})

接下来页面进行传值,main.wxml中

<testName innerData="传递的值" />

完成上述操作后我们在页面中就成功的将值传递给组件,并在页面上进行渲染

三、页面与组件的通讯

1. 组件触发页面中的事件
   组件中写一个button按钮来触发

test.wxml

<view>{{ innerData }}</view>
<button bindtap="innerClick">点击触发</button>

test.js

Component({
  properties: {
    // 此处为页面传值进来的数据存储位置
    innerData:{
		type:String, //此处可以规定值的类型
    	value: 'defaultValue' //此处可以设置默认值,如果不传值则为默认值
    }
  },
  data: {
    // 此处为组件内部使用的数据存储位置
  },
  methods: {
    // 此处为组件内方法声明的地方
    innerClick: function(){
        //使用triggerEvent关键字将事件传递给页面
        //name即为可自定义的在外面触发的标识
        //data为传递给页面方法的值
		this.triggerEvent("name",data,{})
	}
  }
})

页面main.wxml

<testName innerData="传递的值" bind:name="outerClick" />
//name就是我们在组件中声明的标识
//outerClick即我们需要触发的页面中的事件名

main.js中声明outerClick方法

Page({
	//..
	outerClick: function (e){
	     //至此一旦点击组件中的button按钮即能够触发页面outerClick方法
	     console.log(e)
	}
	//..
})

2. 页面触发组件中的事件
   首先我们需要在页面中引用组件时加上id标识符

main.wxml

<testName id="test-name-1" innerData="传递的值" bind:name="outerClick" />

然后main.js中通过id获取自定义组件实例并调用组件的方法
main.js

Page({
	 //...
	 onShow: function () {
		  let myComponent = this.selectComponent('#test-name-1'); 
		  myComponent.innerClick();
		  //innerClick即为我们在组件中声明的方法
	 }
	 //...
})