小程序——局部组件与全局组件

目录

前言

二、引用组件

1.局部引用

2.全局引用

3.全局引用 VS 局部引用

三、自定义组件 - 样式

1. 组件样式隔离

2. 组件样式隔离的注意点

3.修改组件的样式隔离选项

四、自定义组件 - 数据、方法和属性

1.data数据

2. methods 方法

3. properties 属性

4. data 和 properties 的区别

5. 使用 setData 修改 properties 的值

总结

---

---

前言

小程序的局部组件与全局组件的区别与应用

---

一、如何自定义组件？

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

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

二、引用组件

1.局部引用

局部引用:组件只能在当前被引用的页面内使用

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

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


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

2.全局引用

全局引用:组件可以在每个小程序页面中使用

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

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

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

3.全局引用 VS 局部引用

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

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

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

三、自定义组件 - 样式

1. 组件样式隔离