// 父組件 home.wxml
<search-input placeholderText="搜明星、達人"></search-input>

// 子組件 searchInput.wxml
<input placeholder="{{placeholderText}}"/>
// 子組件 searchInput.js
Component({
 	properties: {
	    placeholderText:{
	      type: String,
	      value: '請輸入'
	    }
   }
})

// 子組件 searchInput.wxml
<input bindconfirm="handleSearch"/>
// 子組件 searchInput.js
Component({
 	methods: {
	    handleSearch(){
	      // 自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法指定事件名、detail 對象和事件選項。
	      this.triggerEvent('confirmSearch', {value: '我是輸入的值'}, {});
	    }
   }
})

// 引用自定義組件的頁面 home.wxml
// 可以在引用自定義組件的頁面通過 bind 監(jiān)聽子組件觸發(fā)的事件
<search-input bindconfirmSearch="handleSearch"></search-input>
// 父組件 home.js
Page({
	handleSearch(e){
		const value = e.detail.value;
	}
})

<-- custom-li.wxml -->
<view>
  <view bindtap="liEventListener">我是自定義的 li</view>
</view>
// custom-li.js
Component({
  relations: {
    '../custom-ul/custom-ul': {
      type: 'parent',
    }
  },
  methods: {
    liEventListener: function(){
      this.triggerEvent('click', {}) // 觸發(fā) liPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true }) // 依次觸發(fā) liPageEventListener、ulPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次觸發(fā) liPageEventListener、// 依次觸發(fā) liPageEventListener、ulPageEventListener、ulPageEventListener
    }
  }
})

<!-- custom.wxml -->
<view bindclick="ulEventListener">
  <view class="header">我是自定義的 ul</view>
  <slot></slot>
</view>

<!-- index.wxml -->
<view>
	<custom-ul bindclick="ulPageEventListener">
  		<custom-li bindclick="liPageEventListener"></custom-li>
	</custom-ul>
</view>

// 父組件home.wxml
<search-input class="home-search"></search-input>
//父組件 home.js
Page({
  handleChangeTabs () {
    const searchImput = this.selectComponent('.home-search');
  }
})

// 自定義組件 my-component 內(nèi)部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})

<!-- 父組件使用自定義組件 -->
<my-component id="the-id" />
// 父組件調(diào)用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }