使用-微信开发者工具-实现自定义组件（个人学习）

提示：小程序自定义组件

---

前言

提示：小程序中常常会有一些通用的模块，这些模块会在多个页面中用到。传统的写法是相同代码，重复多次书写，这样非常繁琐。
面对这个情况，小程序基础库提供了让开发者自己创建组件的特性，称之为“自定义组件”。
可以使代码组织变得简洁灵活。

---

提示：以下是本篇文章正文内容，下面案例可供参考

---

一、自定义组件

1.什么是自定义组件

小程序中常常会有一些通用的模块，这些模块会在多个页面中用到。传统的写法是相同代码，重复多次书写，这样非常繁琐。对这个情况，小程序基础库提供了让开发者自己创建组件的特性，称之为“自定义组件”。可以使代码组织变得简洁灵活。

2.自定义组件组成

• 1）json文件 用于于放置一些最基本的组件配置

• （2）wxml 文件 组件模版

• （3）wxss 文件 组件的样式（无法直接使用全局样式，需要通过@import导入）

• （4）js 文件 组件的 JS 代码，承载组件的主要逻辑

---

3.使用步骤

.新建自定义组件

* 在根目录新建commponents组件库

*在组件库中新建header文件夹，在文件夹中右键，选中“新建commponent”自动生成组件内容

* 组件页面编写

*组件wxss文件，因为无法直接使用全局样式，需要导入

*在根目录的pages的index文件夹内(在父组件json文件)index.json里进行引入

*在父组件wxml文件中以组件名作为标签使用组件

*代码效果

---

二、父子组件通信

与Vue父子组件传参原理一样

父传子

1.在父组件中的子组件标签添加属性，给子组件传递数据

2.子组件在js中通过properties接收，可以指定接收数据类型

3.输出

---

子传父

1.在父组件的子组件标签自定义事件，传给子组件

子组件上添加绑定点击事件

2.子组件用this.triggerEvent(‘父组件自定义事件’, ‘要传递的参数’)，触发父组件传过来的自定义事件

3.父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据

4.点击123显示效果

---

# 总结 2010-11-21 北京 阴 初雪🌨🌨🌨感谢老黄同学的慷概受教 黄老邪(￣y▽,￣)╭ 牛掰