微信小程序自定义组件

步骤

1. 创建自定义组件
2. 在页面中使用组件
3. 页面和组件之间的传值

项目结构及实现后效果

image.png

1、 新建自定义component

image.png

微信开发者工具右键新建component即可，完成后会新增以下四个文件

search.wxml —— 布局文件
search.wxss —— css 样式文件
search.json —— 配置文件， 重要！
search.js —— 组件脚本， 重要！

search.wxml

 <view class='search-box'>
 <view>search 组件</view>
 <view class='search-wrap'>
   <input type='text' class='search-input' value='{{value}}' bindinput='getValue'/>
   <button type='primary' class='search-button' bindtap='getSearchWords'>点击</button>
 </view>
</view>

search.wxss

.search-box{
  width: 80%;
  margin: 0 auto;
}
.search-wrap{
  overflow: hidden;
  display: flex;
  margin: 0 auto;
}
.search-input{
  height: 40px;
  line-height: 40px;
  border: 1px solid #e5e5e5;
  flex: 1;
}
.search-button{
  width: 60px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}

search.json

{
  "component": true, // 声明这是一个组件
  "usingComponents": {}  // 可以引入其他组件
}

search.js

// pages/component/search.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    key: {
      type: String, 类型（必填）
      value: '', // 属性值 （可选）
      observer: function(newVal, oldVal){  //  属性被改变时执行的函数（可选）,可以监听外部值的改变，从而进行对应操作
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    value: '' // 组件内自定义的数据
  },

  /**
   * 组件生命周期函数，在组件实例进入页面节点树时执行
   */
  attached: function () {
   // 将外部传入的值复制给value，当然也可以直接使用key值
    this.setData({
      value: this.data.key
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取input中的值
    getValue: function(e) {
      // e.detail.value取到的就是input输入的值
      this.setData({
        value: e.detail.value
      })
      // 如果想要输入就向外部传值，则可以在这里传值
      // this.triggerEvent('getKey', e.detail.value)
    },

    // 点击button才向外部传值
    getSearchWords: function() {
      this.triggerEvent('getKey', this.data.value)
    }
  }
})

tips: 组件内的properties和data都是通过this.data来获取的

2、在页面中使用组件

index 页面也有四个页面

index.wxml —— 布局文件
index.wxss —— css 样式文件
index.json —— 配置文件， 重要！
index.js —— 组件脚本， 重要！

index.wxml

<view class="container">
  <!--
    key="{{key}}"  // 向组件传递key值
    bind:getKey="getKey" // 获取组件内传递出来的值
  -->
  <search key="{{key}}" bind:getKey="getKey"></search>

  <view class='content'>
    <view>这是search传出来的值</view>
    {{key}}
  </view>
</view>

index.wxss

.content{
  width: 80%;
  margin: 30px auto;
}

index.json

{
    "usingComponents": { // 引入search组件
      "search": "../component/search/search"
    }
}

index.js

Page({
  data: {
    key: '搜索'
  },
  onLoad: function () {
  },

  // 获取search组件的值
  getKey: function(e) {
    this.setData({
      key: e.detail
    })
  }
})

总结：

1、定义组件, search.json、search.js
2、使用组件, index.json
3、页面给组件传值, <search key="{{key}}" bind:getKey="getKey"></search>
4、组件给页面传值, this.triggerEvent('getKey', this.data.value)
5、页面获得组件的值, getKey()