步驟

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()