微信开发者工具 无法构建 微信开发者工具组件

提示：小程序自定义组件

文章目录

• 前言
• 一、自定义组件

• 1.什么是自定义组件
• 2.自定义组件组成
• 3.使用步骤

• .新建自定义组件

• * 在根目录新建commponents组件库
• *在组件库中新建header文件夹，在文件夹中右键，选中“新建commponent”自动生成组件内容
• * 组件页面编写
• *组件wxss文件，因为无法直接使用全局样式，需要导入
• *在根目录的pages的index文件夹内(在父组件json文件)index.json里进行引入
• *在父组件wxml文件中以组件名作为标签使用组件
• *代码效果

• 二、父子组件通信

• 父传子

• 1.在父组件中的子组件标签添加属性，给子组件传递数据
• 2.子组件在js中通过properties接收，可以指定接收数据类型
• 3.输出

• 子传父

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

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

• 2.子组件用this.triggerEvent('父组件自定义事件', '要传递的参数')，触发父组件传过来的自定义事件
• 3.父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据
• 4.点击123显示效果

---

前言

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

---

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

---

一、自定义组件

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显示效果

---