一、插槽的使用
-
子组件：
slotTest -
父组件：
home
1.一个插槽
组件模板:
<view>
<slot></slot>
<view>这里是插槽组件的内部细节</view>
</view>
使用：
<view>
<slot></slot>
<view>这里是插槽组件的内部细节</view>
</view>
2.多个插槽
在组件的js文件里写入 multipleSlots: true
<slot-test>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</slot-test>
组件模板 使用多个slot，用name区分
<view>
<slot name="before"></slot>
<view>这里是插槽组件的内部细节</view>
<slot name="after"></slot>
</view>
在父组件使用：
<slot-test>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</slot-test>
二、父子组件之间的通信
总共有三种方式
- 属性绑定：父组件向子组件传值，仅能传递普通类型的数据，无法将方法传递给子组件
- 事件绑定：子组件向父组件传值，可以传递任意数据
- 获取组件实例：父组件还可以通过this.selectComponent()获取子组件实例对象，这样可以直接访问子组件的任意数据和方法
父向子传值
父组件中：
<props-test count="{{count}}"></props-test>
子组件中：
Component({
/**
* 组件的属性列表
*/
properties: {
count: Number
}
})
<text>我是子组件中的count：{{count}}</text>
子向父传值
事件绑定
- 在父组件中定义一个函数；
syncCount(e){
},
- 在父组件中通过自定义事件的形式，将函数传给子组件（使用bind:自定义事件名称）
<props-test count="{{count}}" bind:sync="syncCount"></props-test>
- 在子组件中通过调用this.triggerEvent('自定义事件名称',{/* 参数对象 */}) ，将数据发送到父组件；
<text>我是子组件中的count：{{count}}</text>
<button bindtap="addCount">count+1</button>
methods: {
addCount() {
this.setData({
count: this.properties.count + 1
})
//触发自定义事件将value传给父组件
this.triggerEvent('sync', this.properties.count)
}
}
- 在父组件中通过e.detail来获取子组件传来的数据；
syncCount(e){
console.log("e", e);
this.setData({
count:e.detail
})
},
