小程序组件使用和组件传值记录

组件传值

组件传值（事件和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
}