自定义组件---搜索框_搜索组件js-CSDN博客

实现目标：子组件向父组件传递数据

文件目录结构：

search为子组件，index为父组件。

在对组件进行封装时在当前页面想要获取组件中的某一状态，需要使用到this.triggerEvent(' ',{},{})，第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将想要的属性拿到。

实验步骤：

在子组件search.js文件中通过triggerEvent事件触发父组件中的自定义事件，同时传递数据给父组件。
在父组件index.wxml文件标签上加上一个自定义事件。
在父组件中的index.js文件中自定义事件，用来接收子组件传递过来的数据。

详细代码如下：

子组件search.js代码：

// components/search/search.js
Component({
    /** 组件的属性列表*/
    properties: {
    },

    /** 组件的初始数据*/
    data: {
        Content: "", //搜索查询的内容
    },

    /**组件的方法列表*/
    methods: {
        //点击键盘上的搜索取值
        bindconfirm:function(e) {
            this.setData({
                Content: e.detail.value
            })
            // console.log("子组件data里面的", this.data.Content)
            // 点击事件带参传入父级
            this.triggerEvent('Searchcontent', this.data.Content)
        },
        bindcancel:function(e) {
            // console.log('子组件 取消', e)
            this.setData({
                Content: ""
            })
            this.triggerEvent('Searchcontent', this.data.Content)
        },
    }
})

父组件index.wxml代码：

这里要特别注意的是 bind:后面的Searchcontent是子组件search.js中this.triggerEvent()的第一个参数！

<!--index.wxml-->
<search bind:Searchcontent="getContent"></search>

父组件index.js代码：

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    search: "",
  },
  //自定义事件，接收子组件传递过来的数据
  getContent(e) {
    console.log("主页：",e)
    this.setData({
      search: e.detail
    })
  },
})

控制台打印信息：

子组件的样式：

search.json代码：

{
    "component": true,
    "usingComponents": {}
}

search.wxml代码：

<!--components/search/search.wxml-->
<view>
    <view class="search">
      <view class="search_in">
        <icon class="weui-icon-search_in-box" type="search" size="25"></icon>
        <input type="text" placeholder="请输入搜索内容" value="{{Content}}" confirm-type="search" bindconfirm="bindconfirm"/>
        <view class="search_btn" bindtap="bindcancel">取消</view>
      </view>
    </view>
</view>

search.wxss代码：

/* components/search/search.wxss */
.search {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background-color: #16a0f8;
  }
  .search .search_in {
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:0 20rpx ;
    box-sizing: border-box;
    height: 70rpx;
    width: 710rpx;
    background-color: #ffffff;
    border-radius: 35rpx;
  }
  .search_in image {
    height: 45rpx;
    width: 45rpx;
  }
  .search input {
    width: 480rpx;
  }
  .search_in .search_btn {
    height: 55rpx;
    width: 110rpx;
    border-radius: 55rpx;
    background-color: #6cd3ff;
    color: #ffffff;
    text-align: center;
    line-height: 55rpx;
    cursor: pointer;
  }

参考资料：

子组件样式链接：http://t.csdn.cn/N4ebA

自定义组件--子向父传递数据？链接：http://t.csdn.cn/tXO8s