场景：多个页面使用 UI画面基本一致
举个栗子：拿多个页面 都有搜索框 点击跳搜索页面
实施：
创建公用组件页面 search
search.wxml
<view class="search">
<view class="search-inputView flex-align-center" bindtap=" callFather ">
<image src="/assets/icons/icon_fd.png" bindtap=" jumpsearch "></image>
<input placeholder="{{inputValue}}" value="" disabled></input>
</view>
</view>
search.css
.search {position: fixed;top: 0;z-index: 1001;width: 100%; background: #fff; left: 0;font-size: 28rpx;}
.flex-align-center{display: flex;align-items: center}
.search-inputView { width: 92%;box-sizing: border-box; margin: 20rpx 0;margin-left: 4%; height: 70rpx;line-height: 70rpx;
background: rgba(245, 247, 252, 1);padding: 0 30rpx; border-radius: 45rpx;}
.search-inputView input {width: 85%;margin-left: 10rpx; margin-right: 20rpx;}
.search-inputView image {width: 35rpx;height: 35rpx;}
.scroll-view {position: fixed;top: 180rpx;left: 0;z-index: 10002;}
search.js
Component({
properties: {
inputValue: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
created() {
console.log('被使用了~~~')
},
methods: {
jumpsearch: function() {
wx.navigateTo({
url: '/pages/search/search'
})
},
// 子组件点击 传递参数到父组件 调用父组件事件
callFather: function (e) {
this.triggerEvent('callFather', e ) // callFather 自定义名称事件，父组件中接收
},
}
})
使用组件页面
index.wxml
<search inputValue="{{placeholderValue}}" bind: callFather =" callFather "></search>
index.json
{
"navigationBarTitleText": "首页",
"usingComponents": {
"search": "../public/search",
}
}
index.js
Page({
data: {placeholderValue:'哈哈哈'},
callFather (e){
console.log(e) //父组件接收 子组件传递的参数
}
})
