9.自定义组件 - 父子组件之间的通信
(1).父子组件之间通信的3种方式
- 属性绑定
- 用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据
- 事件绑定
- 用于子组件向父组件传递数据，可以传递任意数据
- 获取组件实列
- 父组件还可以通过 this.selectComponent()获取组件实列
- 这样就可以直接访问子组件的任意数据和方法
(2).属性绑定 (父亲传递给儿子)
属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。
- 父亲组件
// 父组件的 data 节点 data:{ count:0 } // 父组件的wxml结构 count="{{count}}" <my-test3 count="{{count}}"></my-test3> <view>{{count}}</view>
- 子组件
我们子组件在properties节点种声明对应的属性并使用
// 子组件的 properties 节点 properties:{ count:Number } // 子组件的wxml结构 <text>子组件->{{count}}</text>
- 父亲传递函数
home.wxml
<!--pages/home/home.wxml--> <text class="t1">首页</text> <view> 父组件中Count的值为: {{count}} </view> <view> --------------- </view> // 传递函数 <my-test5 count="{{count}}"></my-test5>
- 儿子组件接受参数
tes5t.js
// components/test5/test5.js Component({ /** * 组件的属性列表 */ properties: { // 注册-> 第一个是注册的变量名，第二个是注册的变量类型 count: Number }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })
- 儿子组件输出传递过来的组件
test5.wxml
<!--components/test5/test5.wxml--> <text>父组件传递过来的数据为 : {{count}}</text>
- 儿子调用自增的函数
test5.wxml
<!--components/test5/test5.wxml--> <text>父组件传递过来的数据为 : {{count}}</text> <button type="primary" bindtap="addCount">点我+1</button>
test5.js
// components/test5/test5.js Component({ /** * 组件的属性列表 */ properties: { // 注册-> 第一个是注册的变量名，第二个是注册的变量类型 count: Number }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { addCount(){ console.log(this) this.setData({ count:this.properties.count+1 }) } } })
(3).事件绑定 (儿子传递给父亲)
事件绑定用于实现子向父传值，可以传递任何类型的数据。
1.在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件 2.在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件 3.在子组件的js中，通过调用this.triggerEvent('自定义事件名',{/* 参数对象*/}),将数据传递给父组件 4.在父组件的js中，通过e.detail获取到子组件传递过来的数据
- 父组件定义一个函数
home.js
Page({ syncCount(){ console.log('syncCount') }, /** * 页面的初始数据 */ data: { count:0 }, })
- 父组件将定义的方法传递给子组件
home.wxml
<!--pages/home/home.wxml--> <text class="t1">首页</text> <view> 父组件中Count的值为: {{count}} </view> <view> --------------- </view> <!-- bind:自定义事件名="方法名" --> <my-test5 count="{{count}}" bind:syc1="syncCount"></my-test5>
- 子组件绑定触发事件
test5.js
// components/test5/test5.js Component({ /** * 组件的属性列表 */ properties: { // 注册-> 第一个是注册的变量名，第二个是注册的变量类型 count: Number }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { addCount(){ this.setData({ count:this.properties.count+1 }) // 触发自定义事件，将数值同步给父组件.。 第一个参数是: 自定义事件名，第二个参数是: 传给父类的数据{value:''} this.triggerEvent('syc1',{value:this.properties.count}) } } })
- 父组件进行同步接受数据
test5.js
Page({ syncCount(e){ console.log('syncCount',e) this.setData({ count:e.detail.value }) }, /** * 页面的初始数据 */ data: { count:0 } })
(4).获取组件实列 (父组件获取子组件实列)
可在父组件里调用 this.selectComponent(“id或class选择器”),获取子组件的实列对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。
home.wxml
<!--pages/home/home.wxml--> <text class="t1">首页</text> <view> 父组件中Count的值为: {{count}} </view> <view> --------------- </view> <!-- bind:自定义事件名="方法名" --> <my-test5 count="{{count}}" bind:syc1="syncCount" class="customerA"></my-test5> <button type="warn" bindtap="getChild">获取子组件的实列对象</button>
home.js
Page({ getChild(){ // 这里我们通过类选择器获取实列，并用e接受 const e=this.selectComponent('.customerA') console.log('子组件的实列->',e) // 我们改变这个count值。注意这里我们不能用this,因为this是父组件并不是子组件。所以我们要用子组件的实列对象进行操作。 e.setData({ count:e.data.count+10 }) }, syncCount(e){ console.log('syncCount',e) this.setData({ count:e.detail.value }) }, /** * 页面的初始数据 */ data: { count:0 } })
10.自定义组件-behavios
(1).什么是behaviors
behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的 “mixins”
(2).behaviors的工作方式
每个 behavioor 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior,behavior也可以引用其他的 behavior。
(3).创建behavior
调用 Behavior方法即可创建一个共享的 behavior 实列对象，供所有的组件使用:
我们在根目录下创建Behavior这个文件夹中创建一个文件 behavior.js
my-behaviors.js
// 1. 创建一个Behavior并共享出里面的数据 module.exports= Behavior({ data:{ username:'jsxs' }, properties:{}, methods:{} })
(4).导入并使用 behavior
在组件中，使用 require()方法导入需要的behavior，挂载后 即可访问 behavior中的数据或方法。
test5.js
// 1.在我们要用的组件的 .js上面的文件中引入我们自定义的共享数据 const myBehavior=require('../../behaviors/my-behavior') // 2. 进行数据的挂载 behaviors:[myBehavior],
// components/test5/test5.js // 1.在我们要用的组件的 .js上面的文件中引入我们自定义的共享数据 const myBehavior=require('../../behaviors/my-behavior') Component({ // 2. 进行数据的挂载 behaviors:[myBehavior], /** * 组件的属性列表 */ properties: { // 注册-> 第一个是注册的变量名，第二个是注册的变量类型 count: Number }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { addCount(){ this.setData({ count:this.properties.count+1 }) // 触发自定义事件，将数值同步给父组件.。 第一个参数是: 自定义事件名，第二个参数是: 传给父类的数据{value:''} this.triggerEvent('syc1',{value:this.properties.count}) } } })
test5.wxml
我们继续通过Mustach语法进行获取数据
<!--components/test5/test5.wxml--> <text>父组件传递过来的数据为 : {{count}}</text> <view> 通过behavior获取的数据: {{username}} </view> <button type="primary" bindtap="addCount">点我+1</button>
