组件传值
组件传值（事件和input输入的内容）
组件结构
<button bind:tap="click" data-ss="123">搜索</button>
组件js
// 组件传递事件和内容
// 事件：是搜索
//内容： 是input
当点击搜索时调用this.triggerEvent方法第一个传入的是事件名（随便起）}，第二个是data里的数据
click: function (e) {
this.triggerEvent("icre", { "name": this.data.input }, {})
},
页面中引入组件并使用
- 再json里引入写的组件（起个名儿）
"usingComponents": {
"search":"/components/search/searchinput"
}
刚刚再json文件里起的名字是search，直接再结构里这样写，并把事件绑定到search上
icre注册事件名称
<search bind:icre="click"> </search>
js里直接使用
再事件里可直接获取内容e打印出可以看一下
click: function (e) {
if(e.detail.name == '') {
wx.showToast({
title: '内容不能为空',
icon:'none',
duration: 2000
})
}else {
console.log(e.detail.name)
}
以下是：结构、样式、表现
wxml
<view class="search">
<view class="tit">
<view class="titmsg" bindtap="bindtapshow">
<view>
{{default}}
</view>
</view>
<view class="select_box" wx:for="{{array}}" wx-if="{{select}}" wx:key="item">
<view class="select_one" bindtap="myselect" data-name="{{item}}">{{item}}</view>
</view>
</view>
<view class="iut">
<input type="text" placeholder="" bindinput='usernameInput' value="{{input}}" />
</view>
<view class="searchbtn">
<button bind:tap="click" data-ss="123">搜索</button>
</view>
</view>
js组件没有写component不知道对不对（页面是没问题的）
// components/search/searchinput.js
Page({
/**
* 页面的初始数据
*/
data: {
select:false,
default:'题名',
array:['题名','关键词','作者','摘要'],
input:''
},
/**
* 生命周期函数--监听页面加载
*/
bindtapshow() {
this.setData({
select:!this.data.select
})
},
myselect(e) {
this.setData({
default:e.target.dataset.name
})
this.setData({
select:!this.data.select
})
},
onLoad: function (options) {
},
// 组件传递事件和内容
// 事件：是搜索
//内容： 是input
click: function (e) {
// console.log(e)
this.triggerEvent("icre", { "name": this.data.input }, {})
},
// 给input添加事件，动态数据
usernameInput(e) {
let val =e.detail.value
this.setData({
input:val.trim()
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
css
.search {
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: 1px solid #eee;
display: flex;
justify-content: space-between;
background-color: #ffffff;
}
.tit {
float: left;
}
.titmsg {
width: 150rpx;
border-right: 1px solid #eee;
text-align: center;
}
.select_one {
text-align: center;
background-color: #ffffff;
}
.search input {
float: left;
height: 80rpx;
line-height: 80rpx;
width: 400rpx;
}
.search .searchbtn button{
width: 150rpx;
color: #ffffff;
background: #3073dc;
font-weight: 400;
height: 100%;
}
json
{
"usingComponents": {},
"component": true
}
网友评论