自定义组件

小程序自定义搜索框

微信小程序官方文档中为我们提供了非常丰富的组件，但是在开发中我们可能比较需要一个携带着更加多功能的组件，我们只需要简单得引入组件名就可以使用这个组件携带的功能。

接下来介绍一个自定义组件，自定义搜索框，这个搜索框我们只需要在wxml文件中写入<searchbar></searchbar>就可以把携带输入框和按钮的搜索框引入页面。而如果没有这个自定义搜索框，那么我们要使用搜索框的话就需要用<view>，<input>，<button>等组件进行搭建，还是比不上直接引入自定义组件效率来的快。

好的，大道理不说那么多了，我们直接说这个自定义搜索框要怎么做，首先，我们新建一个小程序项目后，我们在项目文件上方再新建一个components目录，在目录下新建一个searchbar目录，最后在searchbar目录下新建一个component，这样就生成了一组组件文件。其实自定义组件就是可以理解为一个自定义页面， 我们在需要使用自定义组件的页面的json文件中引入组件，就可以在这个页面运用组件进行渲染。

好滴，等这个组件搭建好我就会告诉大家怎么去引入的啦。

首先在wxml中动手搭建页面，我们先分析这个搜索框的搭建需要哪些组件的。核心组件就是<input>输入框组件还有<button>组件当然整体搭建起来就是下面这样：

<view style='display:flex; flex-direction:row;'>

<view class='searchIpt'>

<input placeholder='{{placeholder}}' bindinput='tapInput' style='margin:auto 0; flex:1;' id='ipt'></input>

</view>

<view class='searchBtn'>

<button bindtap='tapBtn'>搜索</button>

</view>

</view>

这里的placeholder是一个属性， 绑定在input组件中，我们要在自定义组件中使用的话，就需要在这个js文件中注册属性:

/**

* 组件的属性列表

*/

properties: {

placeholder:{

type:String,

value:''

}

},

type是指这个属性的类型，这个占位那就是String类型，默认值value就是空吧。

然后呢，我们要对内容进行搜索那就需要获取到搜索框中的内容，还有为按钮绑定对应的事件去响应用户的搜索操作。 方法定义如下：

/**

* 组件的方法列表

*/

methods: {

tapInput:function(e){

this.triggerEvent('change',e.detail.value);

this.setData({

inputValue:e.detail.value

})

},

tapBtn:function(e){

this.triggerEvent('search',this.data.inputValue);

console.log(e);

}

}

上面两个方法就是分别绑定在input组件中还有button按钮中的事件，可能马上就会有人发问了，triggerEvent这个函数是什么？

这个函数就是用来触发指定对象的指定事件，给大家看一下自定义组件的wxml页面：

<searchbar placeholder='请输入搜索内容' bindchange="changeValue" bindsearch="searchValue"></searchbar> 

第一个绑定事件是bindchange,还有一个bindsearch。所以他们绑定的分别是change和search。那么在searchbar中定义这两个绑定事件的函数实现时，对应功能实现就会映射到这边的input和button两组件上，而且每次响应都会有两个值携带着，分别就是上面的e.detail.value和this.data.inputValue，这两个值会在组件的使用过程中被用作数据操作。这样，一个组件就基本上搭建好了，当然还有wxss我就贴出来好了，不多解释了：

.searchIpt{

display:flex;

flex:3;

border:1rpx solid #aaa;

}

.searchBtn{

display:flex;

flex:1;

}

 

最后，我们如果需要在另外一个新建的页面中使用我们自定义的组件，我们就主要在这个页面的json文件中配置组件，如下：

"usingComponents": {

"searchbar": "/components/searchbar/searchbar"

}

那个searchbar是你子集定义的组件名，加入你定义为xxxx，那你在wxml文件中就这样使用组件：<xxxx></xxxx>，这样应该就理解了。

好了，就写到这，希望能给需要的小伙伴们给予到帮助，那将会是无上的荣幸。