24. 自定义组件

这里的组件和vue的组件的概念是一样的

创建组件步骤

1. 在根目录新建一个component的文件夹（不一定名字要叫component），然后在里面新建一个myHeader的文件夹，然后在myHeader的文件夹下，右键-新建Component

组件的文件和pages下是一样的，依然是有js、json、wxml和wxss

2. 在app.json或者在页面中的.json文件中，注册组件。规则是如果这个组件是很多页面或者每个页面都用到的，则在app.json中注册，否则就在页面中的.json文件中注册

3. 使用组件

<view>
  <myHeader />
</view>

这里的myHeader对应第2步的名字

父子组件传值

这里的传值基本和vue一样

父传子

父传递数据

<view>
  <myHeader title="{{ title }}" />
</view>

Page({
  data: {
    title: '这是header的title'
  }
})

子接收数据

<text>{{ title }}</text>

Component({
  properties: {
    title: {
      type:String,
      value: "默认标题"
    }
  }
})

子传父

子发送数据

Component({
  data: {
    info: {
      name: 'tom',
      age: 13
    }
  },
  lifetimes: {
    ready() {
      this.triggerEvent('sendinfo', this.data.info) // 和vue的this.$emit类似
    }
  }
})

父接受数据

<view>
  <myHeader bindsendinfo="getInfo"/>
</view>

Page({
  getInfo(info) {
    console.log(info.detail) // detail字段就是子组件发送过来的info数据
  }
})

selectComponent

类似vue的ref，组件定义一个ref，然后用$refs.子组件.方法的方式来调用子组件的方法

例子

index.wxml

<view>
  <!--给组件定义一个类名，也可以是id-->
  <my-test class="mytest"/>
</view>

index.js

Page({
  onLoad() {
    const mytest = this.selectComponent('.mytest'); // 对应组件的类名或者id名
    mytest.say(); // 调用mytest的say方法
  }
})

mytest.js

Component({
  methods: {
    say() {
      console.log('say hello');
    }
  }
})