父子通信

组件创建

使用

1. 在要使用组件页面的 .json 文件中引入

 "usingComponents": {
    "组件名":"组件路径",
    "Empty":"/components/empty/empty"
  }

2. wxml文件使用组件

 <Empty></Empty>

父传子

父组件传递

 <Empty size="{{size}}" txt="暂无更多数据"></Empty>

子组件接收数据 properties

• type ：数据类型
• value：默认值

Component({
  properties: {
    size:{
      type:String,
      value:'400rpx'
    },
    txt:{
      type:String,
      value:'空空如也 ~'
    }
  },
})

子组件显示数据

<view class="empty">
    <text class="iconfont icon-zanwushuju" style="font-size: {{size}};"></text>
    <view class="txt">{{txt}}</view>
</view>

子通知父 triggerEvent

子组件

this.triggerEvent('事件名',数据)

 methods: {
    onSearch(){
      this.triggerEvent('onSearch',this.data.txt)
    }
  }

父组件

• 视图层 wxml

<Search bind:onSearch="onSearch" />

• 逻辑层 js

 onSearch(e) {
    const { detail } = e
    console.log( detail )
  },