插槽

在自定义组件中可以使用<slot>节点，用于承载组件使用者提供的wxml结构

默认插槽

自定义组件.wxml：

1
2
3
4
<view>
<view>默认插槽：</view>
<view><slot></slot></view>
</view>

父组件.wxml：

1
2
3
<test1>
<text>你好</text>
</test1>

具名插槽

1、插槽默认不支持多个，如果想有多个插槽需要在自定义组件Component配置对象的options属性中配置”multipleSlots”:true。
2、自定义组件的<slot>标签指定name。
3、组件使用者通过slot属性，选择插入内容对应的插槽。（与vue不同，不用包在template中）
自定义组件.js:

1
2
3
4
5
Component({
  options:{
    multipleSlots:true
  }
})

自定义组件.wxml:

1
2
3
4
<view>
<view>before插槽：<slot name="before"></slot></view>
<view>after插槽：<slot name="after"></slot></view>
</view>

父组件.wxml：

1
2
3
4
<test1>
<text slot="after">你好</text>
<text slot="before">世界</text>
</test1>

父子组件通信

属性绑定

用于父组件向子组建的指定属性设置数据，仅能支持JSON兼容的数据
子组件在properties节点中声明对应的属性并使用：
自定义组件.js：

1
2
3
4
5
6
7
8
9
Component({
  properties:{
    age:{
      type:Number,
      value:0
    },
    school:String
  }
})

组件使用者.wxml：

1
<test1 age="10" school="青岛科技大学"></test1>

事件绑定

用于子组件向父组件传递数据，可以传递任意数据：
1、在父组件js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。
2、在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用传递给子组件。
3、在子组件的js中，通过调用this.triggerEvent(“自定义事件名称”,{/*参数对象 */})，将数据发送到父组件（类似vue中的emit）。
4、在父组件的js中，通过e.detail获取到子组件传递过来的数据（类似$on）。
父组件：

1
2
3
4
5
6
7
8
//.wxml
<test1 bind:doSomething="doSomething"></test1>
//.js
Page({
  doSomething(e){
    console.log(e.detail)
  }
})

自定义组件：

1
2
3
4
5
6
7
8
9
10
11
12
//.wxml
<button bind:tap="chufa">触发</button>
//.js
Component({
  methods:{
    chufa:function(){
      this.triggerEvent('doSomething',{
        text:"做点什么"
      })
    }
  }
})

获取组件实例

父组件通过this.selectComponent(“id或class选择器”)获取子组件实例对象，可以直接访问子组件的任意数据和方法
1、在自定义组件身上添加class属性或者id属性
组件使用者：

1
2
3
4
5
6
7
8
9
10
11
12
//.wxml
<test1 class="test1Class" id="test1Id"></test1>
<button bind:tap="clickHandle">点击</button>
//.js
Page({
  clickHandle(e){
    let childs=this.selectAllComponents(".test1Class");
    let child=this.selectComponent("#test1Id")
    console.log(child.data.value)
    child.chufa();
  }
})

自定义组件：

1
2
3
4
5
6
7
8
9
10
11
//.js
Component({
  methods:{
    chufa:function(){
      console.log("触发了")
    }
  },
  data(){
    value:100
  }
})

behaviors

behaviors是小程序中用于实现组建件代码共享的特性，类似于Vue的mixins。
每一个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior，behavior也可以引用其他behavior。

创建behavior

调用Behavior(Object object)方法即可创建一个共享的behavior实例对象，供所有的组件使用。
在项目根目录创建behaviors文件夹，在这个文件夹下创建myBehavior.js文件
myBehavior.js：

1
2
3
4
5
6
7
module.exports = Behavior({
data:{
  userName:"张三"
},
properties:{},
methods:{}
})

导入behavior

在组件中使用require()方法导入需要的behavior，挂载后即可访问behavior中的数据或方法
自定义组件或页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//.wxml
<button bind:tap="chufa">触发</button>
//.js
const myBehavior=require('../../behaviors/myBehaviors')
Component({
  behaviors:[myBehavior],
  methods:{
    chufa:function(){
      console.log(this.data.userName)
    }
  },
  data(){
    value:100
  }
})

behavior中所有可用的节点

同名字段的覆盖和组合规则

请查阅文档。