第7节：《教你简单上手自定义组件》

上一节我们讲了组件的使用，这一节我们讲讲如何自定义组件。

上图，，没错还是这张图，我们就把这个最大红框的看做一个组件，
我们用传统的html代码来实现这个组件，

我们在用小程序语法来实现这个组件

两者供大家参考对比，其实除了组件的不同外，整体排版布局都差不多。class为list_item的

标签包含他们的子孙节点以及组件包含它们的子孙节点组成了我们的组件，在小程序中，这些就成为我们构成组件的template

—————————————————

接下来我们就看看如何在小程序自定义一个组件

首先，在小程序文件根目录创建一个component文件夹，在文件夹里创建一个list-item组件文件夹，右键新建与文件夹同名的component文件，这里的四个文件，除了js文件生成的是component构造器与普通page文件不一样，其余三个文件都是一样的。

如果这时候你发现并没有任何效果的时候，那就对了，因为还没有在父组件的json文件中引用子组件的文件呀，key是在父组件使用的节点名，可以自定义，value是子组件的文件路径了。要想知道没引用哪里来的关联呢，那种空降的组件，还是想想就好了。

现在再去编译看看，原本在父组件中一堆代码，现在只用一个组件就能完美渲染了，太香了吧，这自定义组件也没有很难嘛

—————————————————

这就结束了？如果我在组件模板中有部分数据，是不能共用的，那该怎么办？

这就延伸出另一个知识点了，也是基础的使用方法：在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。没明白是吧？那就往下看

子组件模板中插入一个slot

在父组件中插入内容


—————————————————

这样就插入内容了。如果是有多个slot的话，就需要每个slot定义不同name值来区别

如果定义多个slot的时候，需要定义options：{mutippleSlots：true}，这样才能让你定义的多个slot生效

—————————————————

小结：掌握自定义组件的写法和用法，让代码设计更加灵活。组件之间怎么通信呢？下一节见

还有更多拓展资料

第1节：《什么是小程序，为什么要选择它？》

第2节：《简易安装和快速创建“Hellow Word”》

第3节：《小程序之数据绑定，数据还可以这样玩》

第4节：《小程序必会用到的三个标签和两个控制属性》

第5节：《轻松掌握小程序生命周期》

第6节：《掌握小程序之核心：组件》

欢迎关注 "趣味web前端教程"公众号，一起探讨和学习。