微信小程序：组件、样式隔离、数据方法属性

组件

组件定义在 components 文件夹下。

• 会在组件目录下的 .json 中设置 component: true ，表示当前是组件。

  {
      "component": true,
      "usingComponents": {}
  }
  

组件注册

// 语法格式
{
    "usingComponents": {
        "组件名": "组件路径"
    }
}

全局组件

在 app.json 中全局配置组件。

{
    "usingComponents": {
        "my-test2": "/components/test2/test2"
    }
}

局部组件（推荐）

在页面的 .json 中局部引入组件。

{
    "usingComponents": {
        "my-test2": "/components/test2/test2"
    }
}

组件使用

在 .wxml 中直接使用组件。

<!-- 在组件内容直接使用 -->
<my-test2></my-test2>

自定义组件样式

样式隔离

styleIsolation 可选值	说明
isolation	默认值，表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。
app-shared	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。
shared	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。

// components/test/test.js
Component({
    options: {
        styleIsolation: "shared"
    },
})

数据、方法和属性

data 存放数据，methods 存放方法，properties 是组件的对外属性，用来接收外部传递到组件的数据。

// components/test/test.js
Component({
    // 组件的属性列表
    properties: {
        // 写法一：只设置类型，没有默认值
		count: Number,
        // 写法二：设置默认值
        title: {
            type: String,
            value: '列表'
        }
    },

    // 组件的初始数据
    data: {
		num: 1
    },

    // 组件的方法列表
    methods: {
		say() {
            console.log('说话')
        }
    }
})

<!-- properties 传递参数 -->
<my-test2 :count="{{1}}" :title='商品列表'></my-test2>

properties 和 data 的区别

properties属性 和 data 数据的用法一样，两者打印的值都相同。

• properties：更倾向于存储外部传递到组件中的数据；
• data：更倾向于存储组件的私有数据；

数据监听器

observers 监听和响应任何属性和数据字段的变化，从而执行特定的操作。

// components/test/test.js
Component({
    
    observers: {
        '字段A, 字段2': function(字段A的新值, 字段B的新值) {
            ...
        }
    }
    
})

• 多个属性使用 ... 来代替，使用 obj. 的形式来调用。

  // components/test/test.js
  Component({
      
      observers: {
          '字段A, ...': function(字段A的新值, obj.b的新值, obj.c的新值) {
              ...
          }
      }
      
  })