五分钟搞定小程序自定义组件

---

组件？

---

官方文档这样说：

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
自定义组件

我们总结组件的意义：

• 方便在不同页面重复使用
• 将复杂页面拆分为低耦合代码

在接下来，你将学习如何使用，创建自定义组件，并学会数据绑定与值传递。

---

举个例子？

---

我们可以将搜索栏制作成一个自定义组件。

---

如何使用别人的组件？

---

假设你从你的好基友那偷了一个组件，那么你将拥有：

1. 包含自定义组件的文件夹
2. 与文件夹（组件）同名的.js,.json,.wxml,.wxss文件，它们构成了一个完整的组件。

如何引入组件？

既然偷来了，那么咱就不客气的用了。你有两种引入方式：

• 全局引入
• 单个页面引入

啥区别？
全局引入需要在app.json里配置，配置之后，整个小程序的不同页面都将可以使用。
单个页面引入需要在某个页面的index.json配置，之后只能在该页面内使用。另外一个页面需要使用时，也需要在页面引用。

接下来我们尝试单页面引入偷来的组件。

在我们的小程序的根目录里新建名为Components的文件，将我们偷来的组件放到这个目录里。注意，当我在创建这个目录时开发者工具会自动变换他的图标，如果没有，那么就是打错名字了:0

在要使用的页面引入

在需要引入该组件的页面的index.json里的usingComponents对象里添加类似这样的代码：

	"usingComponents": {
		"这个组件你想叫啥名": "组件在小程序根目录开始的路径"
	}

上面我把偷来的搜索栏组件在index页面引入了。如何使用呢？在页面的.wxml写标签就好了。例如我在上面引入组建的时候叫搜索栏组件叫做search，那么添加<search></search>即可。

效果就出来了。这是最基本的用法。

---

来做一个可以传递值的组件

---

会偷用别人的组件了，接下来自己来写写。我们将完成两个任务：父向子传递数据；子向父传递数据。
下面是一个标签栏，我们要实现父页面定义标签的标题和其他属性，将这些值传递给组件显示出来，并在组件被点击时，让父页面的数据做出变化以高亮显示当前点击的文字的文字。

咋做呢？我们先捋一捋。

咱们有一个页面，页面里有数据。父页面将数据传入组件后，组件会以一定的方式展现；当组件被点击时，组件可以传递被点击的对象给父页面，父页面依据传回的值修改数据，然后使组件响应，修改样式。

这样子，我们明确两个关键的地方：

-传递值给组件

-组件传回值给页面

那我们来写吧。
先在Components文件夹下新建一个文件夹Tabs,然后点击右键，新建Component。

这样一个组件就创建好了。接着我们根据上面的方法将组件配置到页面，写入标签到.wxml就可以看到效果了。

我们首先在我们想要展示的页面写个数据,其中，active用来让组件控制该标题是否有选中提示。

  data: {
    tabs:[
      {
        id:0,
        name:"序",
        active:true
      },
      {
        id:1,
        name:"破",
        active:false
      },
      {
        id:2,
        name:"Q",
        active:false
      },
      {
        id:3,
        name:"终",
        active:false
      }
    ]
  },

有了数据，如何传递给组件呢？打开Tabs.js，我们可以看到这样一行代码：

在这，我们就可以来让组件接收代码，我们只需要在这里声明我们要获取的数据名字，类型，和默认值就可以了。

  properties: {
    tabsItem:{ //数据的名字
      type:Array, //数据类型
      value:"" //数据的默认值
    }
  },

在页面的.wxml里，只需要在标签里加上传递的数据即可。

由此，组件便接收到了数据，我们用一个循环展示他吧。

稍微编写一下组件的.wxss，我们便得到了以下显示结果：

代码在这里下载：做个简单的组件
这里还包含更详细的调试信息，如果等下还是无法理解可以下载后自己动手看看运行结果。

当我们点击其他几个文字时，高亮提示并不会改变它的显示位置，我们可以在内部修改数据的值使其发生变化，但我们还是来需改元数据吧。这时，我们便要向父页面传递我们点击了哪一个文本。

我们在组件写一个bindtap来处理点击事件，data-index来存储最新值。

bindtap和data-xxx的用法这里不做介绍。

在tabs.js里，有一行陌生的代码this.triggerEvent("itemChange",{index}),不要紧，我们再在页面的.js和.wxml里写一点东西再做讲解。

由此，你可能就有点眉目了。为了给父页面传递值，我们首先在组件里保存了这个值，然后使用this.triggerEvent("itemChange",{index})给父页面传递过去，然后父页面一顿操作后使组件刷新显示。

我们来详细解释一下：

---

tabs.js里的this.triggerEvent("itemChange",{index})指定了传递的数据是index,他将成为itemChange事件。

index.wxml使用bind将itemChange事件指定给了handleitemChange处理，随后我们便可在index.js里的handleitemChange对数据进行修改。由此， 我们便可以进行点击后刷新视图的操作。

---

请重复思考上述过程，直到理解。

完成了吗？

恭喜，你已经完成简单组件的编写。