自定义组件-组件的创建与引用

自定义组件-组件的创建与引用

1.创建组件

1. 在项目的根目录中，鼠标右键，创建components->test文件夹
2. 在新建的componens->test文件夹，鼠标右键，点击"新建Component"
3. 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js、.json、.wxml和.wxss

**注意：**为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。

2.引用组件

组件引用方式分为“局部引用”和“全局引用”，顾名思义：

• 局部引用：组件只能在当前被引用的页面内使用
• 全局引用：组件可以在每个小程序页面中使用

3.局部引用组件

在页面的.json配置文件中引用组件的方式，叫做“局部引用”。实例代码如下：

// 在页面的 .json文件中，引入组件
{
	"usingComponents":{
		"my-test1":"/components/test1/test1"
	}
}

// 在页面的 .wxml 文件中，使用组件
<my-test1></my-test1>

4.全局引用组件

在app.json全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

// 在 app.json 文件中，引入组件
{
	"pages":[/* 省略不必要的代码 */],
	"window":{/* 省略不必要的代码 */},
	"usingComponents":{
		"my-test2":"/components/test2/test2"
	}
}

// 在页面的 .wxml 文件中，使用组件
<my-test2></my-test2>

5.全局引用VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式：

• 如果某组件在多个页面中经常被用到，建议进行“全局引用”
• 如果某组件只在特定的页面中被用到，建议进行“局部引用”

6.组件和页面的区别

从表面来看，组件和页面都是由.js、.json、.wxml和.wxss这个四个文件组成。但是组件和页面的.js与.json文件有明显的的不同：

• 组件的.json文件中需要声明==“component”:true==属性
• 组件的.js文件中调用的是==Component()==函数
• 组件的事件处理函数需要定义到methods节点中